Как использовать текстовые поля пользовательского интерфейса с функцией обработчика - есть ли способ дать им имя?

Question

Я пытаюсь написать функцию-обработчик для нескольких текстовых полей, в которые пользователь может вводить текст.Каждое текстовое поле имеет функцию, которая отправляет введенные данные в реквизит и в другой компонент класса для отправки.Я пытаюсь написать обработчик событий, который может обрабатывать все различные текстовые поля без необходимости писать функцию дескриптора для каждого текстового поля.Я использую Fabric UI, и я следую инструкциям, которые все говорят, что должно быть свойство name, переданное из функции, которая может использоваться функцией-обработчиком, чтобы она могла обновлять состояние.Я пытался добавить «имя», «тип» и ничего не принимается.

Может кто-нибудь сказать мне, как различать разные, дав каждому уникальное «имя»?

Вот моя текущая неработающая / законченная функция обработчика, чтобы управлять ими всеми:

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

Почему бы не назначить имя для управления напрямую (если я вас правильно понимаю).

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

Answer 2

Я думаю, вам нужно извлечь имя и значение из ввода, а не только значение.

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

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