React：同じパラメータの州と小道

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} 

しかし、私はプロパティで値を取得し、テキストフィールドも編集できますか？

ありがとうございました！

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

問題は、あなたのtextfieldあるのみ読むことで、valueプロパティに、あなたがprops値を使用していて、onChangeメソッド内state値を更新する、です。

ソリューション：

1.が親の値を更新するfunction親コンポーネントからfunctionとtextfield使用のonChangeを渡し、それはこのように、動作します：

子コンポーネントで：

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

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

親コンポーネント：

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

2.ストアpropsstate変数の値やテキストフィールドの値プロパティでその変数を使用します。

ストアstate変数でtextfieldの初期値：

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

： onChange方法で state変数こと

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

更新：

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

はtextfieldでvalueプロパティでその変数を使用します