Question

我正在将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

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

Answer 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 />

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

2 个答案: