Question

我有多个输入字段：

<label>
    <span className="codes__input-label">Count</span>
    <input
        type="number"
        value={this.state.count}
        onChange={this.onInputChange}
    />
</label>

<label>
    <span className="codes__input-label">One time Usage</span>
    <input
        type="text"
        value={this.state.distributor}
        onChange={this.onInputChange}
    />
</label>

<label>
    <span className="codes__input-label">One time Usage</span>
    <input
        type="checkbox"
        value={this.state.oneTimeUsage}
        onChange={this.onInputChange}
    />
</label>

每个事件都具有一个处理程序似乎是重复的，所以我想为所有这些事件使用一个处理程序。

什么是好的方法？

这是我的最佳尝试。我在setState行上遇到了很长的TypeScript错误。

onInputChange(event: React.FormEvent<HTMLInputElement>): void {
    switch (event.currentTarget.type) {
        case "number":
            this.setState({[event.currentTarget.name]: event.currentTarget.valueAsNumber});
        break; 
        case "text":
            this.setState({[event.currentTarget.name]: event.currentTarget.value});
        break; 
        case "checkbox":
            this.setState({[event.currentTarget.name]: event.currentTarget.checked});
        break; 
    }
}

Answer 1

仅供参考，我不知道Typescript，但您的问题与此无关。我首先看到的是，您的name没有input属性。因此，添加它们。第二个问题是您没有复选框的checked值，也请添加它。

如果尚未绑定onInputChange方法，请对其进行绑定。然后它将按预期工作。

<label>
  <span className="codes__input-label">Count</span>
  <input
    name="count"
    type="number"
    value={this.state.count}
    onChange={this.onInputChange}
  />
</label>

<label>
  <span className="codes__input-label">One time Usage</span>
  <input
    name="distributor"
    type="text"
    value={this.state.distributor}
    onChange={this.onInputChange}
  />
</label>

<label>
  <span className="codes__input-label">One time Usage</span>
  <input
    name="oneTimeUsage"
    type="checkbox"
    checked={this.state.oneTimeUsage}
    onChange={this.onInputChange}
  />
</label>

尽管，如果您不需要直接使用valueAsNumber并且可以使用value本身进行一些数字操作，那么通常人们会使用一种更好的方法。

onInputChange = (e) => {
  const { target, target: { name } } = e;
  const value = target.type === 'checkbox' ? target.checked : target.value;

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

使用TypeScript对OnInputChange处理程序与各种输入类型进行反应？

1 个答案: