React 实时更新输入文本表单答案

【问题标题】：React live update input text formReact 实时更新输入文本表单
【发布时间】：2018-09-19 22:43:43
【问题描述】：

我正在努力将 Excel 电子表格转换为 Web 应用程序。我遇到的一个问题是如何实时更新作为嵌套子项的“首次佣金”值。我如何使这种乘法成为可能并在没有提交的情况下更新文本字段更改的状态？（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}
   ]

组件（classNames与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 以进行澄清

via GIPHY

【问题讨论】：

标签： javascript reactjs input textfield

【解决方案1】：

每次触摸表单时，只需将您的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) });   
  });

【讨论】：

【解决方案2】：

您需要在文本字段输入上设置一个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 />

【讨论】：