Question

我正在使用React中的表单，并希望将收集的数据发送到Firebase数据库。但是，我并不完全确定如何有效地设置它。我已经在下面发布了一些我到目前为止的代码片段。

这是我的组件的开头。据我了解，componentDidMount正在将json文件中的数据提取到这些字段中。但我不确定这是否应该输入要发送给Firebase的代码。

class FormContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      startDate: moment(),
      courseName: '',
      courseCity: '',
      courseStateOptions: [],
      courseStateSelection: '',
      holeNumberOptions: [],
      holeNumberSelection: '',
      yardage: '',
      clubOptions: [],
      clubSelection: ''
    };
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleClearForm = this.handleClearForm.bind(this);
    this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
    this.handleLastNameChange = this.handleLastNameChange.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handleDateChange = this.handleDateChange.bind(this);
    this.handleCourseNameChange = this.handleCourseNameChange.bind(this);
    this.handleCourseCityChange = this.handleCourseCityChange.bind(this);
    this.handleCourseStateSelect = this.handleCourseStateSelect.bind(this);
    this.handleHoleNumberSelect = this.handleHoleNumberSelect.bind(this);
    this.handleYardageChange = this.handleYardageChange.bind(this);
    this.handleClubSelect = this.handleClubSelect.bind(this);
  }
  componentDidMount() {
    fetch('./nhior_db.json')
      .then(res => res.json())
      .then(data => {
        this.setState({
          firstName: data.firstName,
          lastName: data.lastName,
          email: data.email,
          date: data.date,
          courseName: data.courseName,
          courseCity: data.courseCity,
          courseStateOptions: data.courseStateOptions,
          courseStateSelection: data.courseStateSelection,
          holeNumberOptions: data.holeNumberOptions,
          holeNumberSelection: data.holeNumberSelection,
          yardage: data.yardage,
          clubOptions: data.clubOptions,
          clubSelection: data.clubSelection
        });
      });
  }

在此之下，我拥有所有handleFirstNameChange()个功能等。我不会在这里发布所有内容，但这里有一些可供参考。

  handleCourseNameChange(e) {
    this.setState({ courseName: e.target.value }, () => console.log('course name:', this.state.courseName));
  }
  handleCourseCityChange(e) {
    this.setState({ courseCity: e.target.value }, () => console.log('course city:', this.state.courseCity));
  }
  handleCourseStateSelect(e) {
    this.setState({ courseStateSelection: e.target.value}, () => console.log('course state', this.state.courseStateSelection));
  }
  handleHoleNumberSelect(e) {
    this.setState({ holeNumberSelection: e.target.value}, () => console.log('hole number', this.state.holeNumberSelection));

然后我有handleClearForm()和handleFormSubmit()

  handleFormSubmit(e) {
    e.preventDefault();

    const formPayload = {
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      email: this.state.email,
      date: this.state.date,
      courseName: this.state.courseName,
      courseCity: this.state.courseCity,
      courseStateSelection: this.state.courseStateSelection,
      holeNumberSelection: this.state.holeNumberSelection,
      yardage: this.state.yardage,
      clubSelection: this.state.clubSelection
    };

    alert('Thanks for the submission!');
    // console.log('Send this in a POST request:', formPayload)
    this.handleClearForm(e);
  }

最后，render方法包含所有输入，这里有几个。

  render() {
    return (
      <form className="container" onSubmit={this.handleFormSubmit}>
        <h6>If you are one of the SPECIAL FEW to make a hole in one, you have the opportunity to record your success in the national registry!
          Please enter your information, the date of your Hole-In One and click Continue.</h6>
          <SingleInput
            inputType={'text'}
            title={'First name'}
            name={'name'}
            controlFunc={this.handleFirstNameChange}
            content={this.state.firstName}
            placeholder={'First Name'} />
          <SingleInput
            inputType={'text'}
            title={'Last name'}
            name={'name'}
            controlFunc={this.handleLastNameChange}
            content={this.state.lastName}
            placeholder={'Last Name'} />
          <SingleInput
            inputType={'text'}
            title={'Email'}
            name={'name'}
            controlFunc={this.handleEmailChange}
            content={this.state.email}
            placeholder={'Email'} />
          <DatePicker
            selected={this.state.startDate}
            onChange={this.handleDateChange}/>

我只需要知道是否有更好的方法将收集的数据发送到Firebase。

Answer 1

如果我理解正确，你会问两个问题：

我应该输入要发送到Firebase的代码，
如何有效地设置它。

答案取决于你的意思＆＃34;效率＆＃34;。

要简单地让您的示例正常工作，请在handleFormSubmit内添加firebase调用，就在您的console.log所在的位置。但你可能知道这一点。

那么效率如何呢？如果您想以可管理的方式组织代码，那么一个好的开始就是像MobX或Redux这样的状态框架。最好将你的大部分状态（即你从firebase获得的数据）保存在一个地方。

我使用react-redux，基本上将我的逻辑分为两种控制器。一个控制器（通常称为异步函数或thunk）处理数据库提取/保存，另一个控制器为视图准备（映射）数据和事件处理程序。通过这种方式，我很少使用this.setState(...)或this.state来获得明确的，可单元测试的问题分离。

通过您的示例，您将dispatch handleFormSubmit中的store异步操作（使用redux术语），并将此操作推送到firebase并反映全局状态中的更改（例如保存状态） ^([^Y]|Y[^e]|Ye[^s])*Yes([^Y]|Y[^e]|Ye[^s])*$。然后，您只需使用从商店传递到道具中的数据渲染您的组件。

将数据从React表单发送到Firebase数据库

1 个答案: