React双向绑定，详细案例。

最新推荐文章于 2022-12-21 08:59:11 发布

果冻~

最新推荐文章于 2022-12-21 08:59:11 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/weixin_48653480/article/details/109361153

版权

react 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

思路：可以为每个元素添加一个 name 属性(通常和数据名一致)，处理函数根据 event.target.name的值来决定修改那条数据。

    <div id="box"></div>
    <script type="text/babel">
      class Demo extends React.Component{
          constructor(props){
              super(props)
              this.state={
                name:"xiaobai",
                age:"18",
                sex:"男"
              }
          }
          add(e){
              let newage=e.target.value
              this.setState({
               [e.target.name]:newage
              },()=>{
                  console.log(e.target.name)
              }) 
          }
          fun=()=>{
              return (
                    <div>
                        <h1>名字---{this.state.name}</h1>
                        <input type="text" name="name" onChange={(e)=>this.add(e)}/>
                        <h1>年龄---{this.state.age}</h1>
                        <input type="text" name="age" onChange={(e)=>this.add(e)}/>
                        <h1>性别---{this.state.sex}</h1>
                        <input type="text" name="sex" onChange={(e)=>this.add(e)}/>
                    </div>
              )
          }
          render(){
            return (
                <div>
                    oninput测试
                    {this.fun()}
                </div>
            )
      }
      }
      ReactDOM.render(<Demo/>,document.getElementById("box") )
    </script>