React表单应用--表单name复用

最新推荐文章于 2022-05-29 13:58:58 发布

DreamFive

最新推荐文章于 2022-05-29 13:58:58 发布

阅读量1.2k

点赞数

分类专栏： React入门和组件

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

15 篇文章 0 订阅

订阅专栏

name复用方式直接读取表单的属性值，比bind写法少一个参数（React中事件响应函数会自动绑定this）。其原理是在所有的标签中设置统一的name属性，并将这个属性值对应为state属性，在事件响应函数中通过读取表单的name值获得state属性，从event.target.value获取用户输入的值（check控件稍有不同），要求所有相关的标签（包括input标签）都要统一设置name属性。–引用《React前端技术与工程实践》

这种方法看起来更简单，就是每个标签加一个name，然后判断name来进行state的更改。但是我不建议这样使用，因为为每个标签增加一个name属性值并不友好。下面我们修改上节“事件响应和bind复用”的代码把bind复用形式改为name复用形式。

<!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 (event) {
                var newState={};
                newState[event.target.name]=event.target.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} value={this.state.userName}/>
                      <br/>
                      <label htmlFor="checkBox">是或者否：</label>
                      <input type="checkBox" name="checked" id="checkBox" onChange={this.handleChange} checked={this.state.checked}/>
                      <br/>
                      <label htmlFor="gender">请选择：</label>
                      <select name="gender" id="gender" onChange={this.handleChange} 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>

我们可以了解两种表单的操作方式，这两种方式尽量掌握.

DreamFive

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React表单应用--表单name复用

name复用方式直接读取表单的属性值，比bind写法少一个参数（React中事件响应函数会自动绑定this）。其原理是在所有的标签中设置统一的name属性，并将这个属性值对应为state属性，在事件响应函数中通过读取表单的name值获得state属性，从event.target.value获取用户输入的值（check控件稍有不同），要求所有相关的标签（包括input标签）都要统一设置name属性。...
复制链接

扫一扫