Javascript React-表单提交+；设定状态

在我的待办事项列表中，我对编辑方法有问题

我有一个带有输入和提交按钮的表单，当您第一次提交表单时，一切都正常，但是当您第二次尝试提交表单时，它似乎会刷新页面，尽管方法上有默认设置

我尝试删除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）{
编辑模板=(
this.editedData=ref}/>
);
}

函数从未实际调用，因为它未绑定到组件。由于函数是在表单提交事件中调用的，因此

此

上下文不是您的组件。你有两个选择。如果已启用ES7类属性，则可以执行以下操作：

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
  })
}

它将

此

上下文绑定到组件

否则，您可以在构造函数中绑定它：

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

---

您正在使用

this.editedData

作为方法和ref对象变量，因此它将覆盖函数到对象引用。这里我已经改变了

这个.editeddata 1

现在你可以得到数据了。试试这个，如果你有任何问题，请告诉我

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
  })
}

if（this.state.editing）{
编辑模板=(
this.editedData1=ref}/>
);
}
编辑数据=（e）=>{
e、 预防默认值（）；
让editedValue=this.editedData1.value；
让objectKey=this.props.data.key；
让userId=firebase.auth（）.currentUser.uid；
让dbRef=firebase.database（）.ref（`users/${userId}/notes/${objectKey}`）；
dbRef.update({
值：editedValue
})
这是我的国家({
编辑：假
})
}

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
  })
}