受控

一、受控组件

---

1.1 认识

每当表单的状态发生变化时，都会被写入到组件的 state 中，这种组件在 React 中被称为受控组件（controlled component） 简而言之，受状态控制的表单组件为受控组件

1.2 流程

React 受控组件更新 state 的流程

• 可以通过在初始 state 中设置表单的默认值。

• 每当表单的值发生变化时，调用 onChange 事件处理器。

• 事件处理器通过合成事件对象 e 拿到改变后的状态，并更新应用的 state。

• setState 触发视图的重新渲染，完成表单组件值的更新。

1.3 语法

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
        };
    }
    handleChange(e) {
        const {value} = e.target;
        this.setState(
            {
                value,
            },
            () => {
                console.log(this.state.value);
            },
        );
    }
    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.value}
                    onChange={(e) => {
                        this.handleChange(e);
                    }}
                />
            </div>
        );
    }
}

二、非受控组件

---

2.1 认识

如果一个表单组件没有 value props（单选按钮和复选框对应的是 checked prop）时，就可以称为非受控组件。简而言之，不受状态控制的表单组件为非受控组件

2.2 流程

在 React 中，非受控组件是一种反模式，它的值不受组件自身的 state 或 props 控制。通常，需要通过为其添加 ref prop 来访问渲染后的底层 DOM 元素

2.3 语法

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    handleChange(e) {
        const {value} = this.refs.value;
        this.setState({value}, () => {
            console.log(this.state.value);
        });
    }
    render() {
        return (
            <div>
                <input
                    type="text"
                    ref="value"
                    onChange={(e) => {
                        this.handleChange(e);
                    }}
                />
            </div>
        );
    }
}