Реагируйте на 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 он вызывает только событие / функцию щелчка второго ребенка. Как я могу вызвать несколько детей, не создавая больше кнопок?

javascript reactjs jsx

0

Jeremy Miller 30 Окт 2019 в 03:12

Answer 1

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

Пример Родителя

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 (поместите метод на каждую страницу дочернего компонента)

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

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

1

Tom Stickel 30 Окт 2019 в 06:40

Answer 2

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

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

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>

1

jared 30 Окт 2019 в 00:42

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

2 ответа

Похожие вопросы

Новые вопросы

javascript