如何在输入文件标签ReactJS中重新分配保存的文件

问题描述

在我的react组件中，我有这种类型的代码：

state = {
    title: '',file: ''
}

handleTextChange = (e) => {
    this.setState({
        [e.target.id] : e.target.value
    })
}

handleFileChange = (e) => {
    this.setState({
        [e.target.id] : e.target.files[0]
    })
}

render(){
    return(
        <input type="text" id="title" defaultValue={title} onBlur={this.handleTextChange}/>
        <input type="file" id="file" onChange={this.handleFileChange}/>
    )
}

现在的问题是，当我更改文本时，所选文件会自动取消选择，而我必须再次选择它。每次更改文本框中的文本时，我都必须这样做。

如何像在文本框中一样在文件中设置默认值，因此每次不必选择相同的文件。

解决方法

您必须在这里关注不变性。您的状态是一个对象。因此，每次设置状态时，您都只能更改，仅更改属性。

state = {
    title: '',file: ''
}

handleTextChange = (e) => {
    this.setState({
        ...state,[e.target.id] : e.target.value
    })
}

handleFileChange = (e) => {
    this.setState({
        ...state,[e.target.id] : e.target.files[0]
    })
}

render(){
    return(
        <input type="text" id="title" defaultValue={title} onBlur={this.handleTextChange}/>
        <input type="file" id="file" onChange={this.handleFileChange}/>
    )
}