javascript - 在 ReactJs 应用程序中处理 onChange

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

尝试这样的事情

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 包含字符串、数字和 bool 值，您可以使用类型保护和强制转换

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