第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> ~~~