react中双向数据绑定的代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react.js"></script> <script src="./js/react-dom.js"></script> <script src="./js/babel.min.js"></script> <script type="text/babel"> class MyForm extends React.Component{ constructor(props){ super(props); this.state = { inputValue:'123', sexValue:'女', hobby:[ { name:'唱歌', checked:false },{ name:'跳舞', checked:false },{ name:'画画', checked:false }] } } changeValue = (event)=>{ this.setState( { inputValue:event.target.value }) console.log(this.state.inputValue) } setInputValue = ()=>{ this.setState( { inputValue:222 } ) } changeSexValue = (event)=>{ this.setState({ sexValue:event.target.value }) console.log(this.state.sexValue) } changeHobby = (event)=>{ this.setState({ sexValue:event.target.value }) } render(){ return ( <form> 姓名：<input type="text" name="username" value={this.state.inputValue} onChange={this.changeValue} /> 性别： 男<input type="radio" name="sex" value={this.state.sexValue==="男"?true:false} onChange={this.changeSexValue} /> 女<input type="radio" name="sex" value={this.state.sexValue==="女"?true:false} onChange={this.changeSexValue} /> <button onClick={this.setInputValue}>设置值</button> 爱好：{ this.state.hobby.map((item,index)=>{ return ( <span> <input type="checkbox" name="hobby" value={item.name} checked={item.checked} key={index} onChange={this.changeHobby} />{item.name} </span> ) }) } </form> ) } } ReactDOM.render(<MyForm />,document.getElementById('main')) </script> </head> <body> <div id="main"></div> </body> </html>
