默認值不更新DOM重新呈現在反應

我正在處理反應js，我有一個文本中，該用戶可以輸入值，所以我已經使用defaultValue。這個值也是由外部事件改變的。但如果使用外部事件修改了值，它不會反映在我的輸入框中（直到我刷新頁面）。但我把它的值更新爲value輸入框的字段。但用戶無法編輯它。我如何擁有這兩個功能意味着用戶可以更新以及其他事件。這裏是我的輸入框默認值不更新DOM重新呈現在反應

<input type="text" defaultValue={this.props.growth} onBlur={(e) => this.props.growth(e.target.value)}></input>

EDIT1：我添加功能就像維韋克說，但現在的文本框成爲聯合國編輯

constructor(props){ 
     super(props); 
     this.state ={ 
      modifedProgramGrowth: this.props.growth 
     } 
    } 
updateGrowthValue(key){ 
     console.log("value",key) 
     this.setState({growth:key}) 
} 

<input type="text" value={this.state.growth} onChange={(e) => this.updateGrowthValue.bind(e.target.value)} onBlur={(e) => this.props.growth(e.target.value)}></input>

來源

2017-08-14 LowCool

可以this.props.growth成爲組件的狀態？ – VivekN

@VivekN：但在這種情況下，我不能讓它編輯 – LowCool

爲什麼是這樣呢，你可以有defaultValue this.state.growth和onChange你用this.setState更新你的狀態，並與該反應將導致重新呈現並且您的輸入框將開始具有用戶鍵入的值。 – VivekN

根據您編輯的問題，你不必使用綁定來如果您已經在使用箭頭功能，請將參數提供給該功能。更改爲

constructor(props){ 
     super(props); 
     this.state ={ 
      modifedProgramGrowth: this.props.growth 
     } 
    } 
updateGrowthValue(key){ 
     console.log("value",key) 
     this.setState({growth:key}) 
} 

<input type="text" value={this.state.growth} onChange={(e) => this.updateGrowthValue(e.target.value)} onBlur={(e) => this.props.growth(e.target.value)}></input>

來源

2017-08-14 14:09:06

但我的價值沒有得到更新的外部事件.. :(這可能是因爲我的構造函數只初始化一次正確？ – LowCool

從shubham的回答爲可編輯的文本框，我已經加入componentWillReceiveProps(nextProps)我的代碼來解決問題

componentWillReceiveProps(nextProps) 
{ 
     let {growth } =this.state; 
     growth = nextProps.growth ; 
     this.setState({growth }) 
}

來源

2017-08-14 16:05:44 LowCool

默認值不更新DOM重新呈現在反應

回答

相關問題