如何将 fabric ui 文本字段与处理函数一起使用 - 有没有办法给它们命名？

Question

我正在尝试为多个文本字段编写一个处理程序函数，用户可以在其中键入文本。每个文本字段都有一个功能，可以将输入的数据发送到 props 和另一个 class 组件以供提交。我正在尝试编写一个事件处理程序，它可以处理所有不同的文本字段，而不必为每个文本字段编写一个句柄函数。我正在使用 Fabric UI 并且我遵循的指南都说需要从传递的 'name' 属性可以被处理函数使用，以便它可以更新状态。我尝试添加 'name'、'type'，但没有任何内容被接受。

谁能告诉我如何通过给每个人一个独特的 'name' 来区分不同的人？

这是我当前的非 working/finished 处理函数来统治它们：

public handleObjectWithMultipleFields = (ev) => {
  const target = ev.target;
  const value = target. 

  this.setState({
    [ev]: value
  })
}

这是一个文本字段的函数：

private _onJobTitReportToChange = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
        this.props.onJobTitleReportToChange(newValue);
      }

这里是组件中的渲染

<TextField value={this.props.jobTitleReportTo} 
           onChange={this._onJobTitReportToChange}/>

一如既往的感谢。

Answer 1

我认为您需要从输入中提取名称和值，而不仅仅是值。

public handleObjectWithMultipleFields = (ev) => {
  const target = ev.target;
  const {value, name} = target;

  this.setState({
    [name]: value
  })
}

Answer 2

为什么不直接给控件指定名称（如果我没理解错的话）。

<TextField name="txtA"
           onChange={this.handleObjectWithMultipleFields}/>

              <TextField name="txtB"
           onChange={this.handleObjectWithMultipleFields}/>
              <div>

public handleObjectWithMultipleFields  = (ev, newText: string): void => {
    const target = ev.target;
    const value = newText; 
    var _ControlName=target.name;

    this.setState({
      controlName: _ControlName,
      ControlValue:value
    })
  }

如何将 fabric ui 文本字段与处理函数一起使用 - 有没有办法给它们命名？

How to use fabric ui textfields with a handler function - is there a way to give them a name?

sharepoint

typescript

reactjs

spfx