Реагировать в режиме реального времени обновить текстовую форму ввода

Question

Я работаю над преобразованием электронной таблицы Excel в веб-приложение.У меня есть одна проблема - как обновлять значение «first-Commission», которое является вложенным дочерним элементом.Как сделать это умножение возможным и обновить состояние при изменении текстового поля без отправки?(Textfield является компонентом Material-UI)

this.state = {
   personalValues: [
     {"first-commission":  (average-policy * closing * weeks)  },
     {cancels: 0},
     {"average-policy": 0},
     {weeks: 0},
     {presentationsPW: 0},
     {closing: 0},
     {appsPW: 0}
   ]

Компонент (имена классов совпадают с именами personalValues, personalFormValues ​​- это массив заполнения)

<ul key={i}>
    <label>
      {personalFormValues.name[i]}<br/>
      <TextField
        className='${personalFormValues.class[i]}'
        type="number"
        value={this.state.personalValues['${personalFormValues.class[i]}']}
        onChange={this.handleFormChange}
        pattern="[0-9]*"
        required />
    </label>

Метод изменения формы

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

Я включил GIF для разъяснения

через GIPHY

Answer 1

Вам необходимо установить name="personalValues" в поле ввода вашего текста, которое соответствует имени, которое вы используете для сохранения значения в состоянии.

 this.state = {

     personalValues: ""
 }

 <TextField
    className='${personalFormValues.class[i]}'
    type="number"
    value={this.state.personalValues['${personalFormValues.class[i]}']}
    onChange={this.handleFormChange}
    pattern="[0-9]*"
    name="personalValues"
    required />

Answer 2

Просто измените handleFormChange, чтобы обновлять first-commission при каждом касании формы:

handleFormChange(e){
  this.setState({[e.target.name]: e.target.value}, () => {
    const {
      average-policy,
      weeks,
      closing,
    } = this.state;

    this.setState({ 'first-commission': (average-policy * closing * weeks) });   
  });