class Header extends React.Component {
render() {
const menu = {
home: "#home",
pricing: "#pricing",
"about us": "#about-us"
};
const navLinks = Object.keys(menu).map((key, item) => {
return (
<a href={"/" + menu[key]}>
{menu[key]}
</a>
);
});
return (
<nav>
{navLinks}
</nav>
);
}
}
ReactDOM.render(<Header />, document.body);
<form id="myForm">
Username: <input type="text" id="username" class="required" />
<input type="submit" />
</form>
$(document).ready(function() {
$("#myForm").on("submit", function(e) {
e.preventDefault();
alert("works");
});
});
@observable treeData = []
в Store@computed get treeComputed() {
var obj = {};
this.treeData.map(function(value, index) {
if (value.hasOwnProperty("belongs")) {
var objWithPath = objectPath.get(obj, value.belongs.split("."));
objWithPath[`text_${value.id}`] = {
text: value.name,
child: {},
belongs: value.belongs,
id: value.id,
disabled: false,
indx: value.indx,
visible: value.visible
};
} else {
obj[`text_${value.id}`] = {
id: value.id,
text: value.name,
child: {},
mode: "editable",
indx: value.indx,
disabled: false,
visible: value.visible
};
}
});
return obj;
}
@computed
.@computed
) — это значения, которые могут быть получены из существующего состояния или других вычисляемых значений. class Sample {
@observable myArray = [];
constructor() {
var request = new XMLHttpRequest();
request.open("POST", "/my/url", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
request.send(this.myArray.toJS());
}
}
let sample = new Sample();
var Player = React.createClass({
componentDidMount: function() {
this.refs.video.addEventListener("ended", this.onEnded, false);
},
onEnded: function() {
alert("ended");
},
componentWillUnmount: function() {
this.refs.video.removeEventListener("ended", this.onEnded, false);
},
render: function() {
return <video ref="video" src={this.props.src} autoPlay={this.props.autoPlay} width={this.props.width} height={this.props.height} controls />;
}
});
var PlayerContainer = React.createClass({
render: function() {
return <Player width="50%" height="50%" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoPlay="" />;
}
});
ReactDOM.render(<PlayerContainer />, document.body);
var donuts = [
{ type: "Jelly", cost: 1.22 },
{ type: "Chocolate", cost: 2.45 },
{ type: "Cider", cost: 1.59 },
{ type: "Boston Cream", cost: 5.99 }
];
donuts.forEach( function(part, index, theArray) {
theArray[index].type += ` donuts cost ${theArray[index].cost}`;
})
console.log(donuts)