受控和非受控组件

受控组件的基本使用

在html中，表单元素（如input、textarea、select）之类的表单元素通常自己维护state，并根据用户输入进行更新
而在react中，可变元素（multiple state）通常保存在组件的state属性中，并且只能通过使用setState()来更新
- 我们将两者结合起来，是react的state成为唯一数据源
- 渲染表单的react组件还控制着用户输入过程中表单发生的操作
- 被react以这种方式控制取值的表单输入元素就叫做受控组件
由于在表单元素上设置了value属性美因茨显示的值将永远为this.state.value，这使得react的state成为唯一数据源
由于onchange事件绑定的函数在每次按键时都会执行并更新react的state，因此显示的值将随着用户输入而更新

受控组件的数据流遵循一个清晰的闭环：

用户在输入框中输入内容。
触发 onChange 事件。
事件处理函数调用 setState() 来更新 state。
state 更新后，组件重新渲染。
输入框的值通过 value 属性从 state 中获取，从而显示为新值。

例子：

jsx

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      myValue : "hello lwt"
    }
  }

  valueChange(e) {
    console.log(e.target.value)
    this.setState({myValue: e.target.value})
  }

  render() {
    const { myValue } = this.state

    return (
      <div>
        <input type="text" onChange={e => this.valueChange(e)}  value={myValue}/>
      </div>
    )
  }
}

export default App

非受控组件

非受控组件实际上就是在操作原生dom

react推荐大多数情况下使用受控组件来处理表单数据
- 一个受控组件中，表单数据是由react组件来管理的
- 另一种替代方案是使用非受控组件，这时表单数据将交由dom节点来处理
如果要使用非受控组件中的数据，那么我们需要使用ref来从dom节点中获取表单数据
在非受控组件中通常使用defaultValue来设置默认值
同样，<input type="checkbox">和<input type="radio">支持defaultChecked，select和textarea支持defaultValue

例子：

jsx

import React, { createRef, PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      intro: "hello lwt"
    }

    this.introRef = createRef()
  }

  componentDidMount() {
    // this.introRef.current.addEventListener()
  }

  render() {
    return (
      <div>
        <input type="text" defaultValue={this.state.intro} ref={this.introRef} />
      </div>
    )
  }
}

export default App

受控和非受控组件 ​

受控组件的基本使用 ​

非受控组件 ​

受控和非受控组件

受控组件的基本使用

非受控组件