如何清除反应表单中的输入值？

Question

在我的代码中，我在 onSubmit 事件中提到了 preventDefault 方法，因此当用户在表单中输入数据时我的页面没有重新加载...

你能告诉我有什么方法可以将数据导出到 firebase 并自动重新加载我的页面！

代码如下：

import React, { Component } from 'react';
const firebase = require('firebase');
const uuid = require('uuid');

var config = {
  apiKey: "AIzaSyAtpOSiCqFy43ZTE-7CJdcHrIGNN1GrsSk",
  authDomain: "electronic-health-record-a795c.firebaseapp.com",
  databaseURL: "https://electronic-health-record-a795c.firebaseio.com",
  projectId: "electronic-health-record-a795c",
  storageBucket: "electronic-health-record-a795c.appspot.com",
  messagingSenderId: "545743770560"
};
firebase.initializeApp(config);
class Usurvey extends Component {
  constructor(props) {
    super(props);
    this.state = {
      uid: uuid.v1(),
      firstName: '',
      lastName: '',
    };
    this.submitData = this.submitData.bind(this);
    this.inputData = this.inputData.bind(this);
  }

  componentDidMount() {
    firebase
      .database()
      .ref(`Newdata/${this.state.uid}`)
      .on('value', snap => console.log('from db', snap.val()));
  }

  submitData(event) {
    event.preventDefault();
    firebase
      .database()
      .ref(`Newdata/${this.state.uid}`)
      .set({
        firstName: this.state.firstName,
        lastName: this.state.lastName,
      })
      .catch(error => console.log(error));
  }
  inputData(event) {
    const firstName = this.refs.name1.value;
    const lastName = this.refs.name2.value;
    this.setState({ firstName, lastName });
  }
  render() {
    return (
      <div>
        <form onSubmit={this.submitData}>
          <input type="text" onChange={this.inputData} ref="name1" />
          <input type="text" onChange={this.inputData} ref="name2" />
          <input type="submit" />Submit
        </form>
      </div>
    );
  }
}
export default Usurvey;

Answer 1

应该是这样的

 class Usurvey extends Component {
   constructor(props) {
    super(props);
    this.state = {
      uid: uuid.v1(),
      firstName: '',
      lastName: '',
    };
    this.submitData = this.submitData.bind(this);
    this.inputData = this.inputData.bind(this);
  }

   componentDidMount() {
     firebase
      .database()
      .ref(`Newdata/${this.state.uid}`)
      .on('value', snap => console.log('from db', snap.val()));
   }

   submitData(e) {
    const { firstName, lastName } = this.state;
    e.preventDefault();
    firebase
     .database()
     .ref(`Newdata/${this.state.uid}`)
     .set({
       firstName: firstName,
       lastName: lastName,
     })
     .catch(error => console.log(error));

      this.setState({
        firstName: '', lastName: ''
      });
   }

   inputData(e) {
     this.setState({ [e.target.name]: e.target.value });
   }

   render() {
     return (
       <div>
         <form onSubmit={this.submitData}>
          <input type="text" value={this.state.firstName} onChange={this.inputData} name="firstName" />
          <input type="text" value={this.state.lastName} onChange={this.inputData} name="lastName" />
          <button type="submit">Submit</button>
         </form>
        </div>
     );
   }
}
export default Usurvey;

当用户在表单中输入时，您可以直接更新您的状态，同时在您提交时重置您的表单，以便用户可以在表单中添加更多信息。

Answer 2

如果您想上传数据并在完成后重新加载，您可以这样做：

submitData(event) {
    event.preventDefault();
    firebase
      .database()
      .ref(`Newdata/${this.state.uid}`)
      .set({
        firstName: this.state.firstName,
        lastName: this.state.lastName,
      })
      .then(() => {
        location.reload();
        // or window.location.reload() if location is undefined
      })
      .catch(error => console.log(error));
  }