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

用TypeScript对各种输入类型的inputchange处理程序作出反应?

typescript reactjs

user1283776 · 技术社区 · 6 年前

<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; 
    }
}

1 回复 | 直到 6 年前

devserkan 6 年前

仅供参考,我不知道 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
 });
}

推荐文章