React - フォーム提出+設定状態

Question

私の行うべきこと編集方法に問題があります。

フォームには入力と送信ボタンがあり、最初にフォームを送信するとすべて正常に動作しますが、2回目にしようとすると、メソッドにpreventDefaultがあってもページを更新するように見えます。

defaultValueを削除しようとしましたが、動作しませんでした。

編集方法

editedData(e) { 
    e.preventDefault(); 
    let editedValue = this.editedData.value; 
    let objectKey = this.props.data.key; 
    let userId = firebase.auth().currentUser.uid; 
    let dbRef = firebase.database().ref(`users/${userId}/notes/${objectKey}`); 
    dbRef.update({ 
     value: editedValue 
    }) 
    this.setState({ 
     editing: false 
    }) 
} 

フォーム

if(this.state.editing) { 
    editingTemplate = (
     <form onSubmit={this.editedData}> 
      <input className="form-input" type="text" defaultValue={this.props.data.value} ref={ref => this.editedData = ref} /> 
      <input type="submit" value="Save" /> 
     </form> 
    ); 
} 

Answer 1

それが参照オブジェクトする機能が上書きされますので、あなたが方法とrefオブジェクト変数としてthis.editedDataを使用しています。ここで私はthis.editedData1を変更しました。データを取得できます。問題がある場合は、これを試してみてください。

if(this.state.editing) { 
    editingTemplate = (
     <form onSubmit={this.editedData}> 
      <input className="form-input" type="text" defaultValue={this.props.data.value} ref={ref => this.editedData1 = ref} /> 
      <input type="submit" value="Save" /> 
     </form> 
    ); 
} 

editedData = (e) => { 
    e.preventDefault(); 
    let editedValue = this.editedData1.value; 
    let objectKey = this.props.data.key; 
    let userId = firebase.auth().currentUser.uid; 
    let dbRef = firebase.database().ref(`users/${userId}/notes/${objectKey}`); 
    dbRef.update({ 
    value: editedValue 
    }) 
    this.setState({ 
     editing: false 
    }) 
} 

Answer 2

それがコンポーネントにバインドされていないので、関数が実際に呼び出されることはありません。関数がフォーム送信イベントで呼び出されているため、コンテキストはコンポーネントではありません。あなたには2つの選択肢があります。

コンポーネントに thisコンテキストをバインドし

editedData = (e) => { 
    e.preventDefault(); 
    let editedValue = this.editedData.value; 
    let objectKey = this.props.data.key; 
    let userId = firebase.auth().currentUser.uid; 
    let dbRef = firebase.database().ref(`users/${userId}/notes/${objectKey}`); 
    dbRef.update({ 
    value: editedValue 
    }) 
    this.setState({ 
     editing: false 
    }) 
} 

：あなたはES7クラスのプロパティが有効になっている場合は、次の操作を行うことができます。

そうしないと、あなたは、コンストラクタで、それをバインドすることができます。

constructor() { 
    super(); 
    this.editedData = this.editedData.bind(this) 
}