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

最新推荐文章于 2021-10-13 22:01:33 发布

honghong.zhou

最新推荐文章于 2021-10-13 22:01:33 发布

阅读量434

点赞数

分类专栏： react-js 文章标签： react react-js

本文链接：https://blog.csdn.net/chengQunBin/article/details/78362268

版权

react-js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>