Как сделать значение в inputText динамическим?

Question

Я пытаюсь сделать значение по умолчанию для поля ввода из массива в состоянии. Я мог бы поместить значения, но после этого я больше не могу изменять поле (это работает неправильно, я могу добавить только одинбуква, что странно) (PS: в моем коде есть только один вход):

, когда я изменяю значение = "" на входе, он работает, но мне нужно, чтобы эта таблица содержала значения из состояния.

        state ={

        splitAmount : [ {

        SplitAmount0: this.props.data.amount1
          },
         {
        SplitAmount1: this.props.data.amount2
         },
       {
        SplitAmount2: this.props.data.amount3
      }
      ],  
    }

  }


 StopTyping = (event) => {
    const self = this;
    if (self.state.typingTimeout) {
        clearTimeout(self.state.typingTimeout);
    }
    self.setState({
        val : event.target.value,
        name : event.target.name,
        id : event.target.id,
        typingTimeout: setTimeout(function () {
            self.setAmount(self.state.name,self.state.id,self.state.val);
        }, 1000)
    });


}
setAmount=(name,id,val)=>{
    this.removeSplitAmount(name);
    let some=0;
    for(var i=0;i<this.state.splitAmount.length;i++){
        let splitAmountState=`SplitAmount${i}`;
        some+=this.state.splitAmount[i][splitAmountState]
    }
    let newAmount=this.props.data.amount-(some+val);

    if(some>0){

        let newValues=[{[val]:val},{[`SplitAmount${id+1}`]:newAmount}]
        let newSplitAmount=this.state.splitAmount.concat(newValues);
        this.setState({splitAmount:newSplitAmount})

    }
}


      return(
               <div>
                {this.state.splitAmount.map((splitAmount,i)=>{
                    const splitAmountKey=i
                    return(
                        <table className="middle-table"key={i}>
                            <tbody>
                            <tr>
                                <th>DueDate</th>
                                <th>Status</th>
                                <th>Amount</th>
                                <th>VAT</th>
                                <th>Otherexpenses</th>
                                <th>SocialSecurity</th>
                                <th>Miscelaneous</th>
                                <th>TaxableAmount</th>
                            </tr>
                  <tr style={{height:40}}>
                           <td className="middle-table- 
        col">05.12.2018</td>
                           <td className="middle-table-colright-align"> 
                     {this.props.data.status}</td>
                            <td className="middle-table-colright-align">
                             <input className="tax-value" value= 
           {this.state.splitAmount[i][`SplitAmount ${i}`]} id={i} name= 
              {'SplitAmount'+i}
                                                               onChange= 
                      {this.StopTyping}/>
                            </td>
                  <td className="middle-table-colright-align"> 
                    {this.props.data.vatAmount}</td>
                <td className="middle-table-colright-align"> 
               {this.props.data.otherExpenses}</td>
                <td className="middle-table-colright-align"> 
                  {this.props.data.socialSecurityAmountIncluded}</td>
                  <td className="middle-table-colright-align"> 
              {this.props.data.miscellaneousDeduction}</td>
                 <td className="middle-table-colright- 
                     align"style={{backgroundColor:'#F4F6F8'}}>1000</td>
                            </tr>
                            </tbody>
                        </table>
                    )
                })}

Answer 1

Если вы обновляете состояние, никогда не используйте массив или объект текущего состояния: мы всегда должны создавать новую структуру и обновлять состояние с ее помощью. Итак, в вашем методе «StopTyping» (который должен быть переименован в «taxValueChangeHandler», действительно!), Скажите:

let newSplitAmount=[...this.state.splitAmount].concat(newValues);

Создает новый массив со всеми значениями splitAmount и объединяет его с новыми значениями.

Тогда в элементе ввода я всегда явно передаю событие, если событие необходимо в методе:

onChange={(e) => StopTyping(e)}

Надеюсь, это уже поможет!