TextField更新问题

Question

我有3个TextField组件：price，taxRate和totalPrice。 我想通过应用公式totalPrice = price *（1 + taxRate / 100）来修改价格时修改totalPrice。 我试图通过更改this.state.selectedInvoice.totalPrice来更改OnChange函数中totalPrice的值，但是totalPrice Text字段不显示新值。 我发现在更改后不会调用render函数，并强制使用this.forceUpdate（）进行调用。什么都没发生。 我不知道如何改变totalPrice的价值。

谢谢你的建议 波格丹

P.S： 我附上了一小部分代码，因为所有代码都有800多行

onChange(event){
   const target    = event.target;
   let   value     = target.value;
   //console.log(target);    
   let currentState    = Object.assign({}, this.state);
   let objectName      = target.name.split('.')[0]; // selectedInvoice
   let propertyName    = target.name.split('.')[1]; // value
   currentState[objectName][propertyName] = value;
   if(propertyName==="price") {
     console.log("Price...");
     currentState[objectName]['totalPrice'] = value*2 ;
     //When i save the state i expected to have the <TextField /> to be automatically rerender.
   }
   this.setState(currentState);
   console.log(currentState);
   this.forceUpdate() ; //This line is to force render method to run
}

render() {
    <div>
      <div className="row">
       <div className="col-xs-3">
        <TextField
            name              = 'selectedInvoice.price'
            defaultValue      = { this.state.selectedInvoice.price }
            onChange          = { this.onChange }
            hintText          = "Enter Plan price"
            floatingLabelText = "Price"
            floatingLabelFixed= { true }
            fullWidth         = { true }
            errorText         = { typeof this.props.invoicesStore.errors['price']==='undefined' ? '' : this.props.invoicesStore.errors['price'][0].message }
        />
       </div>
       <div className="col-xs-3">
          <TextField
            name              = 'selectedInvoice.currency'
            defaultValue      = { this.state.selectedInvoice.currency }
            onChange          = { this.onChange }
            hintText          = "Enter Currency"
            floatingLabelText = "Currency"
            floatingLabelFixed= { true }
            fullWidth         = { true }
            errorText         = { typeof this.props.invoicesStore.errors['currency']==='undefined' ? '' : this.props.invoicesStore.errors['currency'][0].message }
        />
       </div>
       <div className="col-xs-3">
         <TextField
            name              = 'selectedInvoice.taxRate'
            defaultValue      = { this.state.selectedInvoice.taxRate }
            onChange          = { this.onChange }
            hintText          = "Enter Tax Rate"
            floatingLabelText = "Tax Rate"
            floatingLabelFixed= { true }
            fullWidth         = { true }
            errorText         = { typeof this.props.invoicesStore.errors['taxRate']==='undefined' ? '' : this.props.invoicesStore.errors['taxRate'][0].message }
        />
       </div>
       <div className="col-xs-3">
           <TextField
            name              = 'selectedInvoice.totalPrice'
            defaultValue      = { this.state.selectedInvoice.totalPrice }
            onChange          = { this.onChange }
            hintText          = "Total Price"
            floatingLabelText = "Total Price"
            floatingLabelFixed= {true}
            fullWidth={true}
            errorText         = { typeof this.props.invoicesStore.errors['totalPrice']==='undefined' ? '' : this.props.invoicesStore.errors['totalPrice'][0].message }
        />
       </div>
    </div>
    </div>
}

Answer 1

我使用material-ui模块，解决这个问题的方法是使用value而不是defaultValue。提及我在使用此解决方案时必须强制更新，因为没有这样做，组件不会更新。