React入门笔记(五) — 表单详解

一、无约束(不可控)组件和约束组件(可控)介绍

约束组件，简单的说，就是由React管理了它的value，而非约束性组件的value就是原生的DOM管理的。

1、无约束组件。直接给定组件一个defaultValue值

<input type="text" defaultValue="Hello World!" ref="helloTo" />
//通过ref获取input的值
var inputValue = this.ref.hello.getDOMNode().value;

  无约束组件可以用在基本的无须任何验证或者输入控制的表单中。
2、约束组件

<input type="text" defaultValue={this.state.hello} />
//{}来获取input的值, var inputValue = this.state.hello;
//

3、使用约束组件的好处
  a、符合React的数据流
  b、数据存储在state中，便于使用
  c、便于对数据进行处理

二、不同表单元素的使用

1、label， 2、input， 3、textarea(多行输入)， 4、select下拉列表

表单实例

var MyForm = React.createClass({
    getInitialState: function () {
        return {
            username: "",
            gender: "man",
            checked: true
        };
    },
    handleUsernameChange: function (event) {
        this.setState({
            username: event.target.value
        });
    },
    handleGenderChange: function (event) {
        this.setState({
            gender: event.target.value
        });
    },
    handleCheckboxChange: function (event) {
        this.setState({
            checked: event.target.checked
        });
    },
    submitHandler: function (event) {
        event.preventDefault();//阻住浏览器默认行为，因为submit后默认跳转页面
        console.log(this.state); //打印state状态
    },
    render: function () {
        return <form onSubmit={this.submitHandler}>
        <label htmlFor="username">请输入用户名:</label>
        <input id="username" type="text" value={this.state.username} onChange={this.handleUsernameChange} />
        <br />
        <select value={this.state.gender} onChange={this.handleGenderChange}>
        <option value="man">男</option>
                <option value="woman">女</option>
                </select>
                <br />
                <label htmlFor="checkbox">同意用户协议</label>
        <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleCheckboxChange} />
        <button type="submit">注册</button>
                </form>;
    }
});
React.render(<MyForm></MyForm>, document.body);

三、事件处理函数复用

1、bind复用

handleChange: function (name, event) { //....          
},
this.handleChange.bind(this, "input1");

上面表单实例可写成如下

var MyForm = React.createClass({ 
    getInitialState: function () {
        return {
            username: "",
            gender: "man",
            checked: true
        }; 
    },
    handleChange: function (name, event) { 
        var newState = {};
        newState[name] = (name == "checked" ? event.target.checked : event.target.value);
        this.setState(newState);
    },
    submitHandler: function (event) {
        event.preventDefault();
        console.log(this.state); 
    },
    render: function () {
        return <form onSubmit={this.submitHandler}>
            <label htmlFor="username">请输入用户名:</label>
            <input id="username" type="text" value={this.state.username} onChange={this.handleChange.bind(this, "username")} />
            <br />
            <select value={this.state.gender} onChange={this.handleChange.bind(this, "gender")}> 
                <option value="man">男</option>
                <option value="woman">女</option>
            </select>
            <br />
            <label htmlFor="checkbox">同意用户协议</label>
            <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange.bind(this, "checked")} />
            <button type="submit">注册</button>
        </form>;
        } 
    });
React.render(<MyForm></MyForm>, document.body);

2、name复用

handleChange: function (event) {  
    var name = event.target.name;        
},
this.handleChange; //需有name属性

上面表单实例可写成如下

var MyForm = React.createClass({ 
    getInitialState: function () {
        return {
            username: "",
            gender: "man",
            checked: true
        }; 
    },
    handleChange: function (event) { 
        var newState = {};
var eTarget = event.target;
        newState[eTarget.name] = (eTarget.name == "checked" ? eTarget.checked : eTarget.value);
        this.setState(newState);
    },
    submitHandler: function (event) {
        event.preventDefault();
        console.log(this.state); 
    },
    render: function () {
        return <form onSubmit={this.submitHandler}>
            <label htmlFor="username">请输入用户名:</label>
            <input name="username" id="username" type="text" value={this.state.username} onChange={this.handleChange} />
            <br />
            <select name="gender" value={this.state.gender} onChange={this.handleChange}> 
                <option value="man">男</option>
                <option value="woman">女</option>
            </select>
            <br />
            <label htmlFor="checkbox">同意用户协议</label>
            <input id="checkbox" name="checked" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange} />
            <button type="submit">注册</button>
        </form>;
        } 
    });
React.render(<MyForm></MyForm>, document.body);

四、表单组件自定义

1、为什么要自定义表单组件
  a、内因：表单本身具备特殊性：样式统一、信息内聚、行为固定
  b、外因：本质上是组件嵌套，更好地组织和管理组件

2、两种定义方式
  a、无约束组件

var Radio = React.createClass({ 
    getInitialState: function () {
        return {
            value: this.props.defaultValue
        }; 
    },
    handleChange: function (event) { 
        if (this.props.onChange) {//委托父组件该处理事件
            this.props.onChange(event); 
        }
        this.setState({//更新组件状态；
            value: event.target.value
        }); 
    },
    render: function () {
        var children = {};
        var value = this.props.value || this.state.value;
        React.Children.forEach(this.props.children, function (child, i) {
            var label = <label> 
                <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
                {child.props.children}
                <br/>
            </label>;
            children['label' + i] = label; 
        }.bind(this)); //function (child, i)要绑定到render: function ()，里面this才能正确指向Radio
        return <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="C">
            <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);

  b、约束组件

var Radio = React.createClass({ 
    getInitialState: function () {
        return {
            value: this.props.defaultValue
        }; 
    },
    handleChange: function (event) { 
        if (this.props.onChange) {
            this.props.onChange(event); }
            this.setState({
            value: event.target.value
        }); 
    },
    render: function () {
        var children = {};
        var value = this.props.value || this.state.value;
        React.Children.forEach(this.props.children, function (child, i) {
            var label = <label> 
                <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} />
                {child.props.children}
                <br/>
            </label>;
            children['label' + i] = label; 
        }.bind(this));
        return <span>{children}</span>; 
    }
});
var MyForm = React.createClass({
    getInitialState: function () { 
        return {my_radio: "C"};
    },
    handleChange: function (event) {
        this.setState({
            my_radio: event.target.value
        }); 
    },
    submitHandler: function (event) { 
        event.preventDefault(); 
        alert(this.state.my_radio);
    },
    render: function () {
        return <form onSubmit={this.submitHandler}> 
            <Radio name="my_radio" value={this.state.my_radio} onChange={this.handleChange}>
                <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);

---

参考链接
1、http://www.jikexueyuan.com/course/1536.html