javascript - 学习者问题 : Functions for every text field. 有没有办法制作一个可以处理多个文本字段的通用函数

Question

我的项目在 SPFX、React/TypeScript/Office UI Fabric 中。我发现我正在为我正在制作的表单的每个文本字段制作函数。是否有可以处理多个相似字段的函数，但每个文本字段都有自己独特的状态。

示例文本字段功能:

private _onReason = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
    this.setState({
      Reason: newValue
    });
  }

和另一个几乎相同的:

private _onPurpose = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
    this.setState({
      Purpose: newValue
    });
  }

我的目标是允许用户提交这些多个文本字段的状态，但只是减少代码。

我读过这个，但不知道如何在我的项目中实现:
https://www.pluralsight.com/guides/handling-multiple-inputs-with-single-onchange-handler-react

我认为阻止我实现该复数解决方案的一件事是我正在使用 MS Fabric UI 和 React.FormEvent<HTMLInputElement>, NewValue?: string)我在下面尝试的处理程序函数不喜欢:

public handleChange (evt: React.FormEvent<HTMLInputElement>, newValue?: string) {
    const value = evt.target.value;
    this.setState({
      ...this.state,
      [evt.target.name]: value
    });
  }

它不喜欢 const value 末尾的值...它不喜欢 [evt.target.name] 末尾的名称任何一个。

更新:从彼得的链接建议中尝试了一些东西后，我可以消除上面的错误之一(值错误)，但它仍然给我 [evt.target.name] 的错误(准确的名称)。

Answer 1

你的问题很容易理解而且非常简洁。我也喜欢你提供的关于你的问题的一些背景的链接。我使用 React 钩子(Hook)，我发现减少代码的最简单方法是在 JSX 的属性中使用匿名函数，如下所示:

<label>
  First name
  <input
    type="text"
    onChange={(e) => {setFirstName(e.target.value)}}
  />
</label>
<p> {firstName} </p>

但是，它看起来会有些不同，因为我对 TypeScript 不太熟悉，所以你需要为 e(event) 和 firstName(string) 指定一个类型，并且你没有使用 React 钩子(Hook)。对您来说，您将不得不解构您的状态对象，并且您将拥有更多的语法，因为您有一个包含多个对象的更大状态。希望这可以帮助!