TextField更新問題

-1

我有3個TextField組件：price，taxRate和totalPrice。我想通過應用公式totalPrice = price *（1 + taxRate/100）在價格發生變化時修改totalPrice。我試圖通過更改this.state.selectedInvoice.totalPrice更改OnChange函數內totalPrice的值，但totalPrice文本字段不顯示新值。我發現渲染函數在更改後未被調用，我強制使用this.forceUpdate（）進行調用。什麼都沒發生。我不知道我能做些什麼來改變totalPrice的價值。TextField更新問題

感謝您的建議波格丹

PS：我重視的代碼的一小部分，因爲所有的代碼都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> 
}

來源

2017-09-16 dudufx

你應該提供一些代碼，因爲setstate應該工作得很好。這取決於你如何使用它，如果我們看不到它，我們不能告訴你的代碼有什麼問題:) –

我收到了否定的投票，因爲我沒有顯示任何「研究工作」..我在谷歌搜索發佈之前。我一步一步地試着用console.log（）進行調試。我發現調用render函數的onChange沒有被調用，因此，在我研究之後，我發現通過調用this.forceUpdate（）強制組件渲染的方法......即使對象的狀態值有組件值的正確值不會改變。我沒有很好的反應經驗，並且在發帖之前綁定了很多東西。 – dudufx

我將代碼發佈在：https：//jsfiddle.net/8goy9js5/，因爲我的字符數有限。 – dudufx

我用材料UI模塊和解決方案，這問題是使用value而不是defaultValue。作爲一個提到我必須forceUpdate當我使用此解決方案，因爲沒有這樣做的組件不更新。

來源

2017-09-16 21:33:45 dudufx

TextField更新問題

回答

相關問題