刚开始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.`);
}
}