在reactjs中使用多个组件插入数据

Question

我正在尝试使用 reactjs 中的多个组件将数据插入数据库。在我的第一个组件中，我有一个如下所示的表单（此组件中没有 Submit 按钮）

render() {
return (
    <form>
        <input type="text" name="name" placeholder="Name"/>             
    </form>
);

}

在第二个组件中，我用 if else 逻辑调用该组件。

在第三个组件中，我有如下所示的提交按钮

<Button 
   positive icon='checkmark' 
   labelPosition='right' 
   onClick={this.insertAddress}
   content='Save' 
/>

我的主要问题是使用 state。我怎样才能在这里有效地使用 state ？如何捕获第三个组件中第一个组件的 input 值以插入数据库？

Answer 1

使用容器组件的概念。

创建一个容器组件，它将保存所有子组件的状态。在这里不断更新与数据相关的所有状态。并从这里调用保存功能。

class Parent extends React.Component{
     constructor(props){
        super(props);
        this.state={
           name:'',
           email:'',
           phone:''
        }
        this.handleFormChanges = this.handleFormChanges.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this);
        this.reactToSomeChange = this.reactToSomeChange.bind(this)
     }
      handleFormChanges(ev){
         // handle form and set appropriate state
      }
      handleFormChanges(ev){
         // react to change and set state
      }
      handleSubmit(){
         // update your data store db etc.
      }
      render(){
         return(
             <MyForm changes={this.handleFormChanges} />
             <IfElse changes={this.reactToSomeChange} />
             <Button submit={this.handleSubmit} />
         )
      }

}
// MyFrom component render function
   render() {
       return (
         <form>
           <input type="text" name="name" onChanges={this.props.changes} placeholder="Name"/>             
         </form>
        );
// Button component render function
 render(){
     <button onClick={this.props.submit}>SUBMIT<Button>

  }

子组件不需要调用api来保存数据。它应该从在子组件中共享相同状态的单个父组件完成。

Answer 2

您创建了一个 parent 容器。 parent 容器保存状态、所有方法和事件处理程序。所有这些都绑定到 parent.

然后您将状态的方法和部分传递给 children。当他们 children 使用它们时，他们将改变 parent。我创建了一个简单的沙箱来进行演示。您不需要传递整个状态，只需传递 children.

所需的部分

https://codesandbox.io/s/q335wnjoyj

在reactjs中使用多个组件插入数据

Insert data using multiple components in reactjs

reactjs

react-component