1.前言
之前一直没有看受控组件和非受控组件,今天抽空来 捋一下
2. 基础
- 首先明确受控组件和非受控组件都指的是
表单元素- 例如 <input>、 <textarea> 和 <select>
- 只要牵扯到事件记住 2个
箭头,保证不出错- 事件创建者 在声明事件的时候用 箭头函数
- 事件调用者 调用的时候外层包裹 箭头函数
3. 区别
3.1 受控组件
- 表单组件的状态/数据只由
state维护 修改只能通过setState()来更新,- 表单数据是由 React 组件来管理
3.2 非受控组件
- 使用
ref来从 DOM 节点中获取表单数据。- 表单数据将交由 DOM 节点来处理
4. 受控组件 demo
特点就是数据可控 ,完全由 React的 state管理
class HelloMsg extends Component { //********************** state constructor() { super() this.state = { msg: "双向绑定" } } // ****************自定义函数 //vue v-model v-bind:value = {msg} v-on:input = {} changeHandler = (event) => { this.setState({ msg: event.target.value }) } // *************** render render() { let { msg } = this.state return ( <div> <h1>{msg}</h1> <input type="text" value={msg} onChange={(event) => { this.changeHandler(event) }} /> <hr /> <button onClick={()=>{ console.log("state:",this.state.msg); }}> 提交</button> </div> ) } }
5. 非受控组件 demo
特点 就是 ref 获取DOM 进行数据的更新
这样就不可控,因为不能进行统一管理
class HelloMsg extends Component { //********************** state constructor() { super() this.state = { msg: "双向绑定" } } // ****************自定义函数 //vue v-model v-bind:value = {msg} v-on:input = {} changeHandler = () => { this.setState({ msg: this.msgInput.value }) } // *************** render render() { let { msg } = this.state return ( <div> <input type="text" defaultValue={msg} /> <h1>{msg}</h1> <input type="text" ref={a => { this.msgInput = a }} value={msg} onChange={() => { this.changeHandler() }} /> <hr /> <button onClick={()=>{ console.log("发请求:", this.msgInput.value); }}> 提交</button> </div> ) } }
6.后记
莫听他人言,实践出真知
