react受控组件
什么是受控组件呢？值受到react控制的表单元素，值的来源是state，值的去处也是state
例如：input\textarea等
https://zh-hans.reactjs.org/docs/forms.html#controlled-components
class App extends React.PureComponent{ constructor(props){ super(props); this.state = { name: 'lnj' } } render(){ return ( <form> <input type="text" value={this.state.name} onChange={(e)=>{this.change(e)}}/> </form> ) } change(e){ console.log(e.target.value); this.setState({ name: e.target.value }) } } export default App;
受控组件的处理技巧
- 给每一个受控组件设置一个name
- 通过change事件统一控制受控组件的变化
change(e){ console.log(e.target.name); this.setState({ [e.target.name]: e.target.value }) }
import React from 'react'; class App extends React.PureComponent{ constructor(props){ super(props); this.state = { name: '单佳兰', email: '111@qq.com', phone: '1223456789' } } render(){ return ( <form> <input type="text" value={this.state.name} name={'name'} onChange={(e)=>{this.change(e)}}/> <input type="text" name={'email'} value={this.state.email} onChange={(e)=>{this.change(e)}}/> <input type="text" name={'phone'} value={this.state.phone} onChange={(e)=>{this.change(e)}}/> </form> ) } change(e){ console.log(e.target.name); this.setState({ [e.target.name]: e.target.value }) } } export default App;
非受控组件
非受控组件可以通过ref拿到元素的值，示例如下：
import React from 'react'; class App extends React.PureComponent{ constructor(props){ super(props); this.myRef=React.createRef() } render(){ return ( <form onSubmit={(e)=>{this.submit(e)}}> <input type="text"/> <input type='submit'>提交</input> </form> ) } submit(e){ e.preventDefault(); console.log(this.myRef.current.value) } change(e){ console.log(e.target.name); this.setState({ [e.target.name]: e.target.value }) } } export default App;
