React中事件处理函数的name复用和bind复用

来源：互联网发布：行业研究的数据来源编辑：程序博客网时间：2024/06/05 16:47

name复用

我们先来看没有使用name复用的代码：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>未使用name复用的代码</title>        <script src="js/react.js"></script>        <script src="js/react-dom.js"></script>        <script src="js/browser.min.js"></script>    </head>    <body>        <script type="text/babel">            var MyForm=React.createClass({                getInitialState:function(){                    return ({                        username:"",                        gender:"男",                        checked:true                    });                },                submitHandler:function(event){                    event.preventDefault();                    console.log(this.state);                },                handleChangeUsername:function(event){                    this.setState({username:event.target.value});                },                handleChangeGender:function(event){                    this.setState({gender:event.target.value});                },                handleChangeChecked:function(event){                    this.setState({checked:event.target.checked});                },                render:function(){                    return (                        <form onSubmit={this.submitHandler}>                            <label htmlFor="username">请输入用户名:</label>                            <input type="text" id="username" value={this.state.username} onChange={this.handleChangeUsername}/>                            <select value={this.state.gender} onChange={this.handleChangeGender}>                                <option>男</option>                                <option>女</option>                            </select>                            <br/>                            <label htmlFor="agree">同意用户协议</label>                            <input type="checkbox" id="agree" checked={this.state.checked}onChange={this.handleChangeChecked}/>                            <button type="submit">Submit</button>                        </form>                    );                }            });            ReactDOM.render(<MyForm></MyForm>,document.body);        </script>    </body></html>

没有使用事件处理函数中的name复用的时候，我们需要为每一个事件，都写一个事件处理函数，但是，我们又发现这几个事件处理函数的功能又是一样的，所以，这个时候可以使用name绑定事件。
使用事件处理函数中的name绑定：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>未使用name复用的代码</title>        <script src="js/react.js"></script>        <script src="js/react-dom.js"></script>        <script src="js/browser.min.js"></script>    </head>    <body>        <script type="text/babel">            var MyForm=React.createClass({                getInitialState:function(){                    return ({                        username:"",                        gender:"男",                        checked:true                    });                },                handleChange:function(event){                    var newState={}; //创建一个空对象                      newState[event.target.name]=event.target.name=="checkbox"?event.target.checked:event.target.value;                    this.setState(newState);                },                render:function(){                    return (                        <form onSubmit={this.submitHandler}>                            <label htmlFor="username">请输入用户名:</label>                            <input type="text" id="username" value={this.state.username} onChange={this.handleChange} name="username"/>                            <select value={this.state.gender} onChange={this.handleChange} name="gender">                                <option>男</option>                                <option>女</option>                            </select>                            <br/>                            <label htmlFor="agree">同意用户协议</label>                            <input type="checkbox" id="agree" checked={this.state.checked} onChange={this.handleChange} name="checked"/>                            <button type="submit">Submit</button>                        </form>                    );                }            });                     ReactDOM.render(<MyForm></MyForm>,document.body);        </script>    </body></html>

Bind复用

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>bind复用</title>        <script src="js/react.js"></script>        <script src="js/react-dom.js"></script>        <script src="js/browser.min.js"></script>    </head>    <body>        <script type="text/babel">            var MyForm=React.createClass({                getInitialState:function(){                    return ({                        username:"",                        gender:"男",                        checked:true                    });                },                submitHandler:function(event){                    event.preventDefault();                    console.log(this.state);                },                handleChange:function(name,event){                    var newState={}; //创建一个空对象                    newState[name]=event.target.name=="checkbox"?event.target.checked:event.target.value;                    this.setState(newState);                },                render:function(){                    return (                        <form onSubmit={this.submitHandler}>                            <label htmlFor="username">请输入用户名:</label>                            <input type="text" id="username" value={this.state.username} onChange={this.handleChange.bind(this,"username")}/>                            <select value={this.state.gender} onChange={this.handleChange.bind(this,"gender")} >                                <option>男</option>                                <option>女</option>                            </select>                            <br/>                            <label htmlFor="agree">同意用户协议</label>                            <input type="checkbox" id="agree" checked={this.state.checked} onChange={this.handleChange.bind(this,"checked")} />                            <button type="submit">Submit</button>                        </form>                    );                }            });            ReactDOM.render(<MyForm></MyForm>,document.body);        </script>    </body></html>

阅读全文

0 0