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

我认为阻止我实现该pluralsight解决方案的一件事是我正在使用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] 末尾的名字要么。

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

Answer 1

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

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

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