Question

我目前有一个带有一些输入框的React tsx页面；例如：

<textarea value={this.state.myData!.valueOne}
    onChange={(e) => this.handleValueOneChange(e)}/>

<textarea value={this.state.myData!.valueTwo}
    onChange={(e) => this.handleValueTwoChange(e)}/>

handleValueOneChange和handleValueTwoChange看起来几乎完全相同：

handleValueOneChange(event: React.FormEvent<HTMLTextAreaElement>) {
    let newState = { ...this.state };

    newState.myData!.valueOne = event.currentTarget.value;
    this.setState(newState);
}

handleValueTwoChange(event: React.FormEvent<HTMLTextAreaElement>) {
    let newState = { ...this.state };

    newState.myData!.valueTwo = event.currentTarget.value;
    this.setState(newState);
}

是否可以为两个事件都使用一个功能；例如：

handleDataChange(event: React.FormEvent<HTMLTextAreaElement>, valueByRef) {
    let newState = { ...this.state };

    valueByRef = event.currentTarget.value;
    this.setState(newState);
}

我不太清楚TypeScript的外观：我想做的是可能的，如果可以的话，怎么做？

编辑：

进一步使问题复杂化的是，myData包含类型的混合（这似乎是TS的问题）

Answer 1

当然，要传递回一个字符串，例如：

<Input onChange={(event)=>this.handleChange(event, 'type1')} />

Answer 2

尝试这样的事情

HTML变成

<textarea value={this.state.myData!.valueOne}
    onChange={(e) => this.handleValueChange(e, 'valueOne')}/>

<textarea value={this.state.myData!.valueTwo}
    onChange={(e) => this.handleValueChange(e, 'valueTwo')}/>

和逻辑（我想您的状态为MyState类型）

handleDataChange<K extends keyof MyDataType>(event: React.FormEvent<HTMLTextAreaElement>, ref: K) {
    let newState = { ...this.state };

    newState.myData![ref] = event.currentTarget.value;
    this.setState(newState);
}

编辑：

我根据评论确定了答案

编辑：如果myData包含字符串，数字和布尔值，则可以使用类型保护和强制转换

handleDataChange<K extends keyof MyDataType>(event: React.FormEvent<HTMLTextAreaElement>, ref: K) {
    let newState = { ...this.state };

    let old = newState.myData![ref];
    if (typeof old === "number") newState.myData![ref] = parseInt(event.currentTarget.value); /* or parseFloat, this depends on your app */
    else if (typeof old === "boolean") newState.myData![ref] = (event.currentTarget.value === "1"); /* use any string -> boolean conversion function */
    else newState.myData![ref] = event.currentTarget.value; /* string case */
    this.setState(newState);
}

Answer 3

如果为文本区域指定名称，则可以使用该名称将值添加到状态。

handleChange(event: React.FormEvent<HTMLTextAreaElement) {
    this.setState({
      ...this.state.myData,
      [event.currentTarget.name]: event.currentTarget.value,
    })
  }


<textarea value={this.state.myData.one} name="one"
   onChange={this.handleChange} />

<textarea value={this.state.myData.two} name="two"
   onChange={this.handleChange} />

在这种情况下，

onChange道具看起来也更干净。不使用嵌入式箭头功能。

工作代码沙箱https://codesandbox.io/s/04rm89oq8w

在ReactJs应用程序中处理onChange

3 个答案: