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

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;