Как получить данные из компонента на вкладке (панелях) после того, как пользователь заполнил и нажал кнопку «Сохранить на странице» - Reaction-bootstrap

Question

Работа над продуктом и использование react-bootstrap. Разрешить пользователю вводить информацию о клиенте. Я использую вкладки, поэтому у вас есть что-то вроде:

<Tab.Container id="CustTabs" defaultActiveKey="Details">
   ......
  <Tab.Content>
     <Tab.Pane eventKey="Details">
         <Details custInfo={this.state.custInfo} />
     </Tab.Pane>
     <Tab.Pane eventKey="Page2">
         <Page2 custInfo={this.state.custInfo} />
     </Tab.Pane>

    </Tab.Content>
</Tab.Container>
<Button onClick={this.SaveCust}>Save</Button>

Итак, в SaveCust() я хочу собрать данные, введенные пользователем, в разные панели и сохранить их в бэкэнде. Что мне нужно сделать, чтобы собрать данные на каждой из этих страниц и отправить их на сервер? Следует отметить: каждая панель - это компонент в другом исходном файле, позволяющий пользователю вводить данные. И я использую ответную загрузку.

Заранее спасибо.

Answer 1

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

export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
     //defind all the state variables that the tabs will use
   }
  }
 hangleTabValues =(object) => {
  //update the state values with the changed from tabs depending on which tabs you might defind different functions
 }
render(){
 return (
  <Tab.Container id="CustTabs" defaultActiveKey="Details">
   ......
  <Tab.Content>
     <Tab.Pane eventKey="Details">
         <Details hangleTabValues={this.hangleTabValues} custInfo={this.state.custInfo} />
     </Tab.Pane>
     <Tab.Pane eventKey="Page2">
         //this hangleTabValues={this.hangleTabValues} passed here might be different from the one above
         <Page2 hangleTabValues={this.hangleTabValues} custInfo={this.state.custInfo} />
     </Tab.Pane>

    </Tab.Content>
</Tab.Container>
//SaveCust will then access and submit the state values to the backend
<Button onClick={this.SaveCust}>Save</Button>
 )
}

Answer 2

Необходимо использовать для определения родительского компонента с состоянием, подобным форме данных, которые вы хотите. Затем создайте метод для обработки этого состояния, передайте его компоненту страницы и вызовите его при изменении входных данных. Наконец, в штате есть данные, которые вы хотите опубликовать. Используйте это в вашем методе savecust. В противном случае проверьте правильность реакции библиотеки. Есть много очень полезных!