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

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

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

• 我应该在哪里输入代码发送到火力地堡，并
• 如何有效地进行此项设置。

答案取决于你的意思是“高效”。

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

那么什么是高效？如果你想以一种可管理的方式组织你的代码，那么一个好的开始是一个状态框架，如MobX或Redux。将您的大部分状态（即从Firebase获得的数据）保存在一个地方是一个不错的主意。

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

你的榜样，你会dispatch异步操作（在Redux的术语）在handleFormSubmit，并有此动作的按压数据火力和反映全球状态store的变化（例如保存状态）。然后，您只需使用从商店传递到道具的数据呈现组件。