点击后为按钮元素添加数据目标属性

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 的方法时。现在，在这里，我想做的是，

如果单击该按钮后，我在 add 函数中调用了另一个函数，该函数验证然后返回一些东西。如果有一个值为“1”，那么我想向用户显示该模式。所以，

我没有办法。我怎样才能做到这一点 ？因为要打开一个模式，我们需要一个数据目标，它需要在按钮上，但我的按钮在另一个组件中。所以，

我尝试使用 document.getElementById，然后在单击按钮后添加数据目标属性。但没有运气。谁能给我一点提示？

Answer 1

您尝试渲染的所有子组件都应该在组件的render() 方法中。

如果我没记错的话，你正试图从你的处理程序中渲染<ErrorComponent />，所以它不会工作。如果您尝试使用函数声明创建有状态组件，请参阅参考链接 1 的第一部分。

我建议您的一种方法是：

• 在父组件中维护一个状态dataTarget，并在按钮处理程序中将其更改为true。
• 在render() 内有条件地渲染<ErrorComponent />

当dataTarget 的状态在handler 内部改变时，会导致组件重新渲染，ErrorComponent 会显示出来。

请参考这里：

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