表单是前端页面中非常重要也是非常常用的一个内容，react 也在表单方面进行了很多封装，让开发者可以方便快捷地在 react 组件中使用表单。下面介绍如何在组件中正确的使用表单，从而可以让表单更好地和组件结合在一起。
不可控组件和可控组件介绍
不可控，抛弃了状态，不使用React的数据流。
组件可控的好处：
符合React的数据流
数据存储在state中，便于使用
便于对数据进行处理
不可控组建
<script src="./react-0.13.2/react-0.13.2/build/react.js"></script>可控组件
"./react-0.13.2/react-0.13.2/build/JSXTransformer.js"type="text/jsx">
var MyForm = React.createClass({
submitHandler: function (event) {
event.preventDefault();
var helloTo = findDOMNode(this.refs.helloTo).value alert(helloTo) },
render: function () {
return <form onSubmit={this.submitHandler} <input
ref="helloTo"
type="text"
defaultValue="Hello World!" />
<br />
<button "submit">Speak</button>
</form> }
}) React.render(<MyForm></MyForm>body);
</script>
"./react-0.13.2/react-0.13.2/build/react-with-addons.js" getInitialState: return {
helloTo: "Hello World!"
} handleChange: function (event) {
this.setState({
helloTo: event.target.value
}) alert(state.helloTo) <input "text" value={helloTo} onChange={handleChange} </script>
不同表单元素的使用
username: "" gender: "man" checked: true
} handleUsernameChange: username: event. handleGenderChange: gender: event. handleCheckBoxChange: checked: event.target.checked
}) console.log(state) render: <label htmlFor="username">请输入用户名:</label>
id="username" username} handleUsernameChange} <select gender} handleGenderChange} <option value="man">男</option>
"woman">女 </select>
"checkBox">同意用户协议"checkBox" "agree" checked={this.state.checked} handleCheckBoxChange} >注册</script>
事件处理函数复用
bind复用
function (name var newState = {} newState[name] = name == "checked" ? event.checked : event.setState(newState)handleChange.bind(this"username")} @H_404_430@"gender")}@H_404_430@"checked")} </script>name复用
newState[event.name] = event.name == name="gender" handleChange}"checked" </script>
表单组件自定义
自定义表单组建原因
内因：表单本身具备特殊性：样式统一、信息内聚、行为固定
外因：本质上是组件嵌套，组织和管理组件的一种方式
var Radio = value: props.defaultValue
} if (onChange) {
this.onChange(event) }
value: event.value
var children = {} var value = value || value React.Children.forEach(props.childrenfunction (child var label = <label>
<input "radio" name={name} value={child.value} checked={child.props.value == value} {child.children}
<br/>
</label> children['label' + i] = label }.bind(this))<span>{children}</span> // 不可控组件
/*var MyForm = React.createClass({
submitHandler: function (event) {
event.preventDefault();
alert(this.refs.radio.state.value);
},
render: function () {
return <form onSubmit={this.submitHandler}>
<Radio ref="radio" name="my_radio" defaultValue="B">
<option value="A">First Option</option>
<option value="B">Second Option</option>
<option value="C">Third Option</option>
</Radio>
<button type="submit">Speak</button>
</form>;
}
});
React.render(<MyForm></MyForm>,document.body);*/
可控组件
return {my_radio: "B"} my_radio: event.my_radio) <Radio "my_radio" my_radio} "A">First Option"B">Second Option"C">Third Option </Radio>
</script>
