代码之家 › 专栏 › 技术社区 › bafix2203

将文件设置为State ReactJS

reactjs

bafix2203 · 技术社区 · 6 年前

在我的反应成分中,我有:

 state = {
        title: '',
        content: '',
        file: ''
    }
    handleChange = (e) => {
        this.setState({
            [e.target.id] : e.target.value
        })
    }
    handleSubmit = (e) => {
       e.preventDefault();
       console.log(this.state)
    }



 <form onSubmit={this.handleSubmit}>

 <input type="text" id="title" onChange={this.handleChange}/>

 <textarea id="content" onChange={this.handleChange}></textarea>

 <input type="file" id="file" onChange={this.handleChange}/>

</form>

我要进去了 console.log(this.state) 只有到的路径 file ,像: "C:\fakepath\title.jpg" . 如何设置为状态实际文件? 提前感谢您的帮助!

1 回复 | 直到 6 年前

Sunil Kumar 6 年前

对于从事件读取文件,必须使用 e.target.files[0] 下面的代码对您很有用

state = {
      title: '',
      content: '',
      file: ''
    }
    handleChange = (e) => {
        this.setState({
            [e.target.id] : e.target.value
        })
    }
    handleOnFileChange = (e) => {
        let file = e.target.files[0];
        this.setState({
            [e.target.id] : file
        })
    }
    handleSubmit = (e) => {
       e.preventDefault();
       console.log(this.state)
    }



    <form onSubmit={this.handleSubmit}>

       <input type="text" id="title" onChange={this.handleOnFileChange}/>

       <textarea id="content" onChange={this.handleChange}></textarea>

       <input type="file" id="file" onChange={this.handleChange}/>

    </form>