Вставьте данные, используя несколько компонентов в ReactionJS

Question

Я пытаюсь вставить данные в базу данных, используя несколько компонентов вactjs.В моем первом компоненте у меня есть Форма как ниже (в этом компоненте нет кнопки Submit)

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

}

Во втором компоненте я вызываю этот компонент с ifelse логика.

В третьем компоненте у меня есть кнопка отправки, как показано ниже

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

Моя основная проблема заключается в использовании state.Как я могу эффективно использовать state здесь?Как я могу поймать input значения первого компонента в третьем компоненте для вставки в базу данных?

Answer 1

Вы создаете родительский контейнер.Родительский контейнер содержит состояние, все методы и обработчики событий.Все они привязаны к родителю.

Затем вы передаете методы и части состояния дочерним элементам.Когда дети их используют, они будут менять родителя.Я создал простую песочницу для демонстрации.Вам не нужно передавать весь штат, только те детали, которые нужны детям.

https://codesandbox.io/s/q335wnjoyj

Answer 2

Используйте концепцию компонента Container.

создайте компонент контейнера, который будет содержать состояние всех ваших дочерних компонентов.Продолжайте обновлять все состояния, связанные с данными здесь.и вызовите функцию сохранения отсюда.

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>

  }

Дочерние компоненты не должны вызывать apis для сохранения данных.это должно быть сделано из одного родительского компонента, который имеет такое же состояние в дочерних компонентах.