react中受控组件与非受控组件--
非受控组件：随用随取
1 render() { 2 return ( 3 <div> 4 <h1>非受控组件</h1> 5 <form action="" onSubmit={this.handleSub}> 6 姓名：<input ref={(e) => {this.username = e}} type="text" name="username" /><br></br> 7 密码：<input ref={(e) => {this.password = e}} type="text" name="password"/><br></br> 8 <button>提交</button> 9 </form> 10 </div> 11 ) 12 } 13 handleSub = (event) => { 14 event.preventDefault() //因为表单有个action属性，表示提交地址，默认不写绘刷新当前页面，所以说阻止默认事件，我们实际开发中是以ajax请求，做到不刷新页面的 15 console.log(this) 16 const {username, password} = this 17 alert(`姓名:${username.value}, 密码：${password.value}`) 18 }
受控组件：输入框随着用户的输入把值维护到状态里面去，等用的时候从状态里面获取，例如vue直接利用v-model双向绑定的原理实现
1 render() { 2 return ( 3 <div> 4 <h1>非受控组件</h1> 5 <form action="" onSubmit={this.handleSub}> 6 姓名： 7 <input onChange={this.handlename} type="text" name="username" /> 8 密码： 9 <input onChange={this.handleword} type="text" name="password" /> 10 <button>提交</button> 11 </form> 12 </div> 13 ); 14 } 15 handlename = (e) => { 16 this.setState({username:e.target.value}) 17 } 18 handleword = (e) => { 19 this.setState({password:e.target.value}) 20 } 21 22 handleSub = (event) => { 23 event.preventDefault(); //因为表单有个action属性，表示提交地址，默认不写绘刷新当前页面，所以说阻止默认事件，我们实际开发中是以ajax请求，做到不刷新页面的 24 console.log(this); 25 const { username, password } = this.state; 26 alert(`姓名:${username}, 密码：${password}`); 27 };
