第8节双向数据绑定 · react

[TOC] # react中使用antd input的onChange事件获取e.target.value为null问题文章标签：[javascript](https://www.csdn.net/gather_2c/OtDaQg2sNzExLWJsb2cO0O0O.html)[reactjs](https://www.csdn.net/gather_21/OtTaQg3sNDQ1LWJsb2cO0O0O.html) 版权 ## 解决方法一 **加 e.persist();** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200713103230227.png) 类似于这样就 ## 解决方法二 **赋值解决** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200713103404309.png) # React中的双向数据绑定之input * 主要是通过状态管理进行的双向数据绑定 * 将input中的value与state进行绑定，修改input的同时触发修改state，然后更新全局 ~~~ <!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"> <script src="./js/react.development.js"></script> <script src="./js/react-dom.development.js"></script> <script src="./js/babel.min.js"></script> <title>例子</title> </head> <body> <div id="root1"></div> </body> <script type="text/babel"> //继承实例 window.onload=()=>{ function Welcome(){ return <h1>组件2</h1>; } class TabList extends React.Component{ constructor(){ super(); //继承关键字 this.state={ value:"123456789" //设置默认值 } }; change(e){ console.log(e.target.value); //获取修改后的值 this.setState({ value:e.target.value }) } //渲染 render(){ var flag=this.state.flag; return ( <div> <input value={this.state.value} onChange={(event)=>{this.change(event)}}/> <p>{this.state.value}</p> </div> ) } }; ReactDOM.render( <TabList name="凌晨"/>, document.getElementById("root1") ); } </script> ~~~