Question

在我的待办事项列表中我遇到了编辑方法的问题。

我有一个带有输入和提交按钮的表单，当你第一次提交表单时一切正常，但是当你第二次尝试这样做时，尽管在方法上有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

您正在使用this.editedData作为方法和ref对象变量，因此它会将函数覆盖到对象引用。现在我已经更改了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

该函数实际上从未被调用，因为它没有绑定到组件。由于函数是在表单提交事件上调用的，因此this上下文不是您的组件。你有两个选择。如果启用了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
  })
}

将this上下文绑定到组件。

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

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

React - 表单提交+设置状态

2 个答案: