6. React 表单使用介绍

表单是前端页面中非常重要也是非常常用的一个内容，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")} "gender")}"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>