我在输入类型文件中的 onChange 之后得到一个未命名的状态 - ReactJS

Question

我正在使用输入类型文件将图像上传到 strapi.io。我注意到在 React 开发工具的状态下，它生成了一个未命名的状态，如下图所示。

状态

constructor(props) {
    super(props);
    this.state = {
      first_name: '',
      last_name: '',
      address: '',
      email:'',
      city: '',
      country: '',
      zipcode: '',
      gcash_number: '',
      paypal_email: '',
      error: '', 
      bank_account: '',
      bank_name: ''
    }
    this.handleOnChange = this.handleOnChange.bind(this)
  }

JSX

<div className='col-sm-auto'>
  <label htmlFor='avatar' >Avatar</label>
   <input type='file' className="form-control-file form-control-sm" onChange={this.handleOnChange('avatar')}/>            
</div>

handleOnChange 函数

handleOnChange = input => (event) => {
    if (event.target.type === 'file') {
      this.setState({avatars: event.target.files[0]})
    }
    this.setState({
      [event.target.name]: event.target.value
    })
  }

有人可以向我解释一下这是怎么发生的吗？以及如何在上面加上州名？

Answer 1

this.setState({
    [event.target.name]: event.target.value
});

name 未定义

尝试

<input name="myInputName" type='file' className="form-control-file form-control-sm" onChange={this.handleOnChange('avatar')}/>

Answer 2

输入元素最好定义一个id:

<input id="InputID" type='file' className="form-control-file form-control-sm" onChange={this.handleOnChange('avatar')}/>

因为你在label标签中使用了htmlFor 并尝试以下代码：

this.setState({ [event.target.id]: event.target.value });

我在输入类型文件中的 onChange 之后得到一个未命名的状态 - ReactJS

Im getting an unnamed state after onChange in input type file - ReactJS

javascript

reactjs

image-upload

react-state

input-type-file