react中的受控组件，非受控组件；

刚开始react的时候就接触到受控组件和非受控组件这个概念，然后那个时候长用的组件，比如input,select都是属于受控组件。

受控组件：

<input
    type="text"
    value={this.state.value}
    onChange={(e) => {
        this.setState({
            value: e.target.value,
        });
    }}
/>

<input>要绑定一个onChange事件,每当输入信息时，onChange方法监听到信息，这时候需要把信息通过setValue的方式写入到state中，然后state改变触发render的再次渲染，然后把state的值传输到input组件中，input组件中的value就是接收这个传输值，然后再显示出来。这也是react组件的一个状态控制原理。

非受控组件：

顾名思义，就是不受state的状态值改变而改变，只是具有一个类似于defaultValue这样的初始值来设置状态，或者说只接受props的改变而改变的组件，自身不会去改变state的值。

遇到过的坑：

antd的Upload的组件当添加了fileList属性后，变成了一个主动控制的受控组件，在onChang中需要始终setState fileList，保证所有的状态同步到Upload内。

代码如下：

     <Upload
                  name='file'
                  action={`/api/v1/special-train/wenyanyuanwen-voice?wenyanyuanwenId=${wenyanyuanwenId}&voiceId=${voiceData && voiceData.id || null}`}
                  data={this.upLoadData}
                  fileList={this.state.audioFileList}
                  beforeUpload={this.audioBeforeUpload}
                  onChange={this.audioOnChange}
                >
                  {!audioShow
                    ? <Button>
                      <Icon type="upload" /> Click to Upload
                </Button>
                    : null
                  }
                </Upload>

  audioOnChange = (info) => {
    const status = info.file.status;
    console.log("上传音频info====", info);
    if (this.state.audioShowUploadList) {
      console.log("上传音频info.fileList====", info);
      this.setState({ audioFileList: info.fileList });
    }
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} file uploaded successfully.`);
      this.setState({ audioShow: true });
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  }