笔记十五、React中的非受控组件和受控组件

灰太狼 2024-05-01 16:23 52阅读 0赞

### 15.1 非受控组件 ###

*  非受控组件
    
     *  由组件自身来管理其状态的组件

App.jsx

import React, {Component} from 'react';
    
    class App extends Component {
    
        handleSubmit = () => {
            alert(this.name.value)
        }
    
        // 由组件自身来管理其状态 input、checkbox 等，自己管理自己的值，这种组件成为非受控组件
        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    <label>
                        名字：
                        <input type="text" ref={(a) => (this.name = a)}/>
                    </label>
                    <button type="submit">提交</button>
                </form>
            );
        }
    }
    
    export default App;

他自己维护了一个名叫name的参数值

### 15.2 受控组件 ###

组件内部维护state，state属性和表单元素的值建立依赖关系，再通过onChange事件与setState()结合更新state属性，就能达到控制用户输入过程中表单发生的操作，控制取值的表单输入元素就叫做受控组件（类似vue的数据双向绑定）

代码：手动实现只有 vue 中才有的双向数据绑定

App.jsx

import React, {Component} from 'react';
    
    // 手动实现只有 vue 中才有的双向数据绑定
    class App extends Component {
    
        state = {
            value: "Elenda"
        }
    
        handleSubmit = () => {
            alert(this.state.value)
        }
    
        handleChange = (e) => {
            console.log("handleChange -> ", e.target.value)
            this.setState({value: e.target.value})
        }
    
        // 手动实现只有 vue 中才有的双向数据绑定
        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    <label>
                        名字：
                        <input type="text" value={this.state.value} onChange={this.handleChange}/>
                    </label>
                    <button type="submit">提交</button>
                </form>
            );
        }
    }
    
    export default App;