反应实时更新输入文本形式

时间:2018-09-19 22:43:43

标签: javascript reactjs input textfield

我正在将excel电子表格转换为webapp。我遇到的一个问题是如何实时更新嵌套子级的“ 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}
   ]

组件(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

2 个答案:

答案 0 :(得分: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) });   
  });

答案 1 :(得分:0)

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