反應：狀態和道具上的參數相同

Question

我是初級開發者。 我使用材料UI的Textfield，但我遇到了問題。我通過一個物業獲得價值，它起作用！但我不能編輯文本字段，所以我想使用的onChange參數，這是我的代碼：

<TextField ref="docLibelle" value={this.props.lastuploadfile.content} onChange={this._handleTextFieldChange} 

我的功能：

_handleTextFieldChange = (e:any) => { 
    this.setState({ 
     showReferenceIsRequired : false, 
     libelDoc: e.target.value 
    }); 
} 

我嘗試：

<TextField ref="docLibelle" value={this.state.libelDoc&& this.props.lastuploadfile.content} onChange={this._handleTextFieldChange} 

但它不起作用..我怎樣才能得到的屬性值和編輯也textfield？

謝謝你的回答！

Answer 1

我認爲解決方案非常簡單。既然你希望能夠改變textField價值，也與你的componentDidMount方法

componentDidMount(){ 
    this.setState({libelDoc: this.props.lastuploadfile.content}) 
} 

值你可以用道具的setState初始化它，使用它像」

<TextField ref="docLibelle" value={this.state.libelDoc} onChange={this._handleTextFieldChange} 

Answer 2

的問題是，在價值屬性，您使用的是props值和onChange方法內更新state價值，因爲你textfield是只有讀取。

解決方案：

傳遞從父組件一function和textfield使用onChange是function更新父值，它會工作，像這樣：

兒童組件：

<TextField ref="docLibelle" value={this.props.lastuploadfile.content} onChange={this._handleTextFieldChange}/> 

_handleTextFieldChange = (e:any) => { 
    this.setState({ 
     showReferenceIsRequired : false, 
    }); 
    this.props.updateValue(e.target.value); 
} 

In Parent component：

updateValue(value){ 
    let = this.state.lastuploadfile; 
    lastuploadfile.content = value; 
    this.setState({lastuploadfile}) 
} 

2.商店props在state變量值，並使用該變量在文本框的值屬性。

商店textfield在state變量的初始值：

constructor(props){ 
    super(props); 
    this.state = {libelDoc: props.lastuploadfile.content} 
} 

使用該變量在value財產textfield：

<TextField ref="docLibelle" value={this.state.libelDoc} onChange={this._handleTextFieldChange} 

更新state變量onChange方法：

_handleTextFieldChange = (event, value) => { 
    this.setState({ 
     showReferenceIsRequired : false, 
     libelDoc: value 
    });   
}