Реагируйте на JS Parent для вызова функций нескольких дочерних элементов одним нажатием кнопки

Question

Пример родительской страницы с вкладками

import {Tab, Tabs } from 'react-bootstrap';
import * as Survey from "survey-react";
import "survey-react/survey.css";
import SectionA from './SectionA';
import SectionB from './SectionB';

//Tabs
<Tabs activeKey={this.state.activeTab} onSelect={this.handleSelect}>
    <Tab eventKey={1} title="CORE SEC A."><SectionA setClick={click => this.clickChild = click}/></Tab>
    <Tab eventKey={2} title="CORE SEC B."><SectionB setClick={click => this.clickChild = click}/></Tab>
     ...
</Tabs>


//button function
<button onClick={() => this.clickChild()}>Validate All</button>

Пример дочерней страницы

componentDidMount() {

    this.props.setClick(this.getValidation);
}

getValidation() {       
    survey.currentPage.hasErrors();     
}

Проблема заключается в том, что при нажатии кнопки Validate All вызывается только второе событие клика дочернего элемента /функция. Как я могу вызвать несколько детей без создания дополнительных кнопок?

Answer 1

Я бы сделал это с помощью ref

Пример Parent

class Parent extends React.Component {

    constructor(props){
        super(props);           

        this.childA = React.createRef();
        this.childB = React.createRef();
        //....
    }

    onClick = () => {
        this.childA.current.getValidation();
        this.childB.current.getValidation();
        //....

    };

    render(){ return ( 
          <React.Fragment>
          ....
          <button onClick={this.onClick}>Validate Complete</button>



          <Tab eventKey={1} title="CORE SEC A."><SectionA ref={this.childA}/></Tab>
          <Tab eventKey={2} title="CORE SEC B."><SectionB ref={this.childB}/></Tab>

          </React.Fragment>
          )}
}

Пример Child (метод put на каждой странице дочернего компонента)

 getValidation() {            
        console.log('Section A validation');  // Section B  etc... for other component files
        survey.currentPage.hasErrors();
 }

Я не в восторге от всего этого дублирования кода - похоже, вам не нужно иметь кучу файлов для обслуживания. Это должно работать для вас, основываясь на том, что я вижу. Если у какого-нибудь гуру React / Javascript есть лучшее решение, мне тоже интересно. Проблема в том, что нет кодовой базы, чтобы увидеть, что на самом деле скрыто.

Answer 2

Вы можете присвоить компонентам SectionA и SectionB одно и то же имя класса, а затем вызвать событие щелчка для этого класса в обработчике события нажатия кнопки.

Редактировать: добавление примера кода

handleClick() {
 const elements = document.getElementsByClassName('clickme');
 for(let i=0; i<elements.length; i++) {
  elements[i].click();
 }
}

//Tabs
<Tabs activeKey={this.state.activeTab} onSelect={this.handleSelect}>
    <Tab eventKey={1} title="CORE SEC A."><SectionA className="clickme" setClick={click => this.clickChild = click}/></Tab>
    <Tab eventKey={2} title="CORE SEC B."><SectionB className="clickme" setClick={click => this.clickChild = click}/></Tab>
     ...
</Tabs>

//button function
<button onClick={() => this.handleClick()}>Validate All</button>