一、不可控组件
1.简介
2.代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>琛ㄥ崟璇﹁В</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
// var MyForm = React.createClass({
// render: function () {
// return <input
// type="text" defaultValue="Hello World!" />;
// }
// });
var MyForm = React.createClass({
submitHandler: function (event) {
event.preventDefault();
var helloTo = React.findDOMNode(this.refs.helloTo).value;
alert(helloTo);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<input
ref="helloTo"
type="text"
defaultValue="Hello World!" />
<br />
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>
二、可控组件
1.简介
2.代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单详解</title>
</head>
<body>
<script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var MyForm = React.createClass({
getInitialState: function () {
return {
helloTo: "Hello World!"
};
},
handleChange: function (event) {
this.setState({
helloTo: event.target.value
});
},
submitHandler: function (event) {
event.preventDefault();
alert(this.state.helloTo);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<input type="text" value={this.state.helloTo} onChange={this.handleChange} />
<br />
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>, document.body);
</script>
</body>
</html>