学习者问题：每个文本字段的功能。有没有办法制作一个可以处理多个文本字段的通用函数答案

【问题标题】：Learner Question: Functions for every text field. Is there a way to make a universal function that can handle multiple text fields学习者问题：每个文本字段的功能。有没有办法制作一个可以处理多个文本字段的通用函数
【发布时间】：2020-04-21 05:51:30
【问题描述】：

我的项目在 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

我认为阻止我实施该 Multiplesight 解决方案的一件事是我正在使用 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] 的错误（准确的名称）。

【问题讨论】：

这可能是相关的：stackoverflow.com/questions/44321326/…
彼得建议的上述链接让我更接近，但我仍然收到 [evt.target.name] 错误，它不喜欢名称（'EventTarget 上不存在属性名称' )
是的，看起来像是 TypeScript 问题。如果你时间紧迫，我只会给它类型。

标签： javascript reactjs typescript

【解决方案1】：

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

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

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

【讨论】：