javascript - 输入字段的 onChange 函数不起作用

Question

尝试更改输入字段的状态，但 onChange 似乎不起作用，并且输入字段被禁用(不允许我输入)

constructor() {
    super();
    this.state = {
        title: '',
        length: '',
        image: '',
        source: '',
        available: '',
        date: '',
        errors: {}
    }
    this.onChange = this.onChange.bind(this);
}

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

<input value={this.state.length} onChange={this.onChange} type="text" 
    className="form-control" name="email" placeholder="e.g. 3:36" />

Answer 1

2 件事:

您的 setState 函数根据事件的目标节点名称更新状态中的值，此处名称(“电子邮件”)与您在状态中获取的值(长度)。

第二个错误是您的 onChange 未绑定(bind)到您的类，调用 this.setState 将返回错误。

您可以通过更改输入中的值变量来解决它:

<input value={this.state.email} onChange={this.onChange} type="text" className="form-control" name="email" placeholder="e.g. 3:36"/>

并将 onChange 转换为箭头函数(或绑定(bind)它):

onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
}