我正在使用输入类型的文件将图像上传到trapi.io。我注意到,在react dev工具上的状态下,它会生成一个未命名的状态,如下图所示。
状态
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
})
}
有人可以向我解释这是怎么发生的?以及如何在上面加上州名?
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')}/>
最好为输入元素定义一个id:
<input id="InputID" type='file' className="form-control-file form-control-sm" onChange={this.handleOnChange('avatar')}/>
因为您在标签标记中使用了htmlFor并尝试以下代码:
this.setState({ [event.target.id]: event.target.value });