React表单应用--事件响应和bind复用

最新推荐文章于 2024-08-14 11:09:28 发布

DreamFive

最新推荐文章于 2024-08-14 11:09:28 发布

阅读量423

点赞数

分类专栏： React入门和组件

React入门和组件专栏收录该内容

15 篇文章 0 订阅

订阅专栏

事件响应

表单组件可以通过设置onChange（）回调函数来监听组件变化。当用户的交互行为导致变化时，onChange（）被执行并通过浏览器做出响应。

用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取。

<input>或<textarea>的value发生变化。
<input>的checked状态改变。
<option>的selected 状态改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习React</title>
</head>
<body>
    <div id="reactContainer"></div>

    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script type="text/babel">
        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);
                console.log(newState);
            },
            submitHandler:function (e) {
               e.preventDefault();
               var is = this.state.checked?'是':'不是';
               var gender=this.state.gender == 'man'?'帅哥':'美女';
               alert(this.state.userName + is + gender);
            },
            render:function () {
              return (
                  <form onSubmit={this.submitHandler}>
                      <label htmlFor="userName">请输入您的姓名：</label>
                      <input type="text" name="userName" id="userName" onChange={this.handleChange.bind(this,"userName")} value={this.state.userName}/>
                      <br/>
                      <label htmlFor="checkBox">是或者否：</label>
                      <input type="checkBox" name="checked" id="checkBox" onChange={this.handleChange.bind(this,"checked")} checked={this.state.checked}/>
                      <br/>
                      <label htmlFor="gender">请选择：</label>
                      <select name="gender" id="gender" onChange={this.handleChange.bind(this,"gender")} value={this.state.gender}>
                          <option value="man">帅哥</option>
                          <option value="woman">美女</option>
                      </select>
                      <br/>
                      <button type="submit">提交</button>
                  </form>
              )
            },
        });

        ReactDOM.render(
            <MyForm/>,
            document.getElementById('reactContainer')
        );
    </script>
</body>
</html>