如何清除反应表单中的输入值？ [英] How do I clear the input values in a react form?

问题描述

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

In my code I have mention preventDefault method on onSubmit event and due to that my page is not getting reload when user enter data in form...

你能告诉我任何我可以将数据导出到firebase的方式，并自动重新加载我的页面！

Can you tell me any way by which I can export data to firebase and also reload my page automatically!

以下是代码：

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;

推荐答案

这就是它的样子

 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;

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

You directly update your state as the user inputs in the form, also on your submission you reset your form, so the user can add more information in the form.

这篇关于如何清除反应表单中的输入值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！