React中的受控组件和非受控组件

官方对于受控组件和非受控组件的描述：

• 在 HTML 中，表单元素、（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
  我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

• 自身理解：
  针对于表单元素而言，如果数据由组件本身本身进行维护，让react的state状态成为唯一数据源的话，那就是受控组件
  非受控组件不需要写事件处理函数，由DOM自身进行维护。一般通过Ref进行DOM的绑定。

受控组件

 class App extends React.Component{
            constructor(){
                super()
                this.state = {
                    value:"11"
                }
            }
            render(){
                return(
                    <div>
                        <input value={this.state.value} type="text" />
                    </div>
                )
            }
        }
        ReactDOM.render(<App />,document.getElementById("app"))

如上述这样写会报错的，如果用状态去控制输入框，这样是没有办法去控制输入框输入的值，是输入不了内容的，要配合一个onChange事件来控制这输入框的值

纠正错误的代码

     class App extends React.Component{
            constructor(){
                super()
                this.state = {
                    value:"11"
                }
            }
            handleChange = (e) => {
                this.setState({
                    value:e.target.value
                })
            }
            render(){
                return(
                    <div>
                        <input value={this.state.value} onChange={this.handleChange} type="text" />
                        <p>{this.state.value}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(<App />,document.getElementById("app"))

由于在输入框元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。由于 handlechange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。

对于受控组件来说，输入的值始终由 React 的 state 驱动。你也可以将 value 传递给其他 UI 元素，或者通过其他事件处理函数重置，但这意味着你需要编写更多的代码。

非受控组件

使用ref从DOM节点获取表单元素

class App extends React.Component {
            handleSubmit = (e) => {
                console.log(this.input.value);
                e.preventDefault()

            }
            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" ref={el => this.input = el} />{/*ref做标记*/}
                        <input type="submit" />
                    </form>
                )
            }
        }
        ReactDOM.render(<App />, document.getElementById("app"))