react的受控组件和非受控组件

/*
 * @Description: 受控和不受控制的表单字段都有其优点不必纠结用哪种
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-06-01 10:20:33
 * @LastEditors: lhl
 * @LastEditTime: 2020-06-02 10:24:53
*/ 
import React, { Component } from 'react'

// 受控组件和非受控组件的区别
export default class App extends Component {
  render() {
    return (
      <div>
        <p>hello react</p>
        <FormTest></FormTest>
        <NameTestNo></NameTestNo>
        <FileInput></FileInput>
      </div>
    )
  }
}

// 官方推荐多数情况下使用 受控组件 来处理表单数据
// 受控组件就是可以被 react 状态控制的组件 表单的输入框 下拉框 复选框 和 文本域接受一个 value 属性，可以使用它来实现受控组件默认值（比如受控组件DOM操作、双向数据绑定）
class FormTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '我是受控value默认值' // 受控组件通过value给定 默认值
    };
  }
  handleChange = (event) => {
    // 如果必须保留原始合成事件，请使用event.persist() 打印前调用
    // event.persist()
    // console.log(event)
    this.setState({value: event.target.value});
  }
  handleSubmit = (event) => {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          受控组件名字
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

// 使用非受控组件  使用 ref 来从 DOM 节点中获取表单数据  下拉框 复选框 和 文本域接受一个 defaultChecked defaultValue属性，可以使用它来实现非受控组件默认值
class NameTestNo extends React.Component {
  constructor(props) {
    super(props);
    this.input = React.createRef(); // 创建ref
  }
  handleSubmit = (event) => {
    // event.persist()
    // console.log(event)
    alert('提交的名字: ' + this.input.current.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          非受控组件名字（通过ref获取）
          <input type="text" ref={this.input}   defaultValue="我是非受控ref组件defaultValue默认值"/>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

// 特别的在 React 中，<input type="file" /> 始终是一个非受控组件，因为它的值只能由用户设置，而不能通过代码控制
class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.fileInput = React.createRef();
  }
  handleSubmit = (event) => {
    // event.persist()
    // console.log(event)
    event.preventDefault();
    alert(
      `Selected file - ${this.fileInput.current.files[0].name}`
    );
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          上传文件:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">提交</button>
      </form>
    );
  }
}