добавить атрибут цели данных в элемент кнопки после нажатия

Question

Я новичок в react js.Здесь у меня есть модал, который похож на ->

ErrorComponent.js

import React from 'react';


export default class ErrorComponent extends React.Component {


    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            ...
      </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}





**LowLeveLCriteria.js**

   class LowLevelCriteria extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            technologies: this.props.techData,
            lowData: this.props.lowData.low,
            showModal: false
        }
    }

 validate (v1, v2) {  return "1" }


    onaddRow(e, id) {
            const errors = this.validate("value1", "value2");

            if (errors === "1") {
            } else {
                this.setState({
            showModal: true
        })
               }


        render() {
        return (
            <div>
                <div className="questionLevelIndication">
                    <span className="levelIndicatorBtn backgroundColorForLow">
                        1
                    </span>
                    <label className="levelIndicationLabel">
                        Low Difficulty Level - Maximum 6 questions
                    </label>
                </div>
                {(this.props.lowData) && this.props.lowData.Low.length > 0 && this.props.lowData.Low.map(data => (
                    <LowRow technologies={this.state.technologies} onChange={this.onchange.bind(this)} data={data} key={data.id} onAddRow={this.onaddRow.bind(this)} onRemoveRow={this.onRemoveRow.bind(this)} />
                ))}
                {this.state.showModal && <ErrorComponent />}
            </div>

        )
    }

<button type="button" className="btn btn-primary btn-sm standard-btn-50 margin-left-10" onClick={(e) => { props.onAddRow(e, props.data.id) }}>+</button>

Теперь, здесь, когда я нажимаю на кнопку, которая является дочерним элементоми затем вызывает метод, который AddRow в родительском компоненте.Теперь, вот что я хочу сделать, это то, что

, если после нажатия на эту кнопку я вызываю еще одну функцию внутри функции добавления, которая проверяет, а затем возвращает что-то.Если есть значение, равное «1», то я хочу показать этот модальный для пользователя.Итак,

У меня нет пути.Как я могу это сделать ?Потому что для открытия модала нам нужна цель данных, которая должна быть на кнопке, но моя кнопка находится в каком-то другом компоненте.Итак,

Я попытался с document.getElementById и затем добавил атрибут цели данных после нажатия на кнопку.Но не повезло.Может ли кто-нибудь дать мне подсказку?

Answer 1

Все подкомпоненты, которые вы пытаетесь визуализировать, должны быть в методе render() компонента.

Если я не ошибаюсь, вы пытаетесь отрендерить <ErrorComponent /> из вашего обработчика, поэтому он не будет работать.Если вы пытаетесь создать компонент с состоянием с использованием объявления функции, см. Первую часть ссылки 1. 1. 1005 *

Один из подходов, которые я предлагаю вам, это:

• Поддержание состояния dataTarget внутри родительского компонента и измените его на true внутри обработчика кнопки.
• Условно визуализируйте <ErrorComponent /> внутри render()

Когда состояние dataTarget изменяется внутри обработчика,это приведет к повторной визуализации компонента, и отобразится ErrorComponent.

Пожалуйста, обратитесь сюда:

1. https://reactjs.org/docs/conditional-rendering.html
2. https://www.robinwieruch.de/conditional-rendering-react/