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，然后在单击按钮后添加了data target属性。但是没有运气。有人可以给我一点提示吗？

Answer 1

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

如果我没记错的话，您是在尝试从处理程序中呈现<ErrorComponent />，因此它将无法正常工作。如果您尝试使用函数声明创建有状态组件，请参阅ref链接1的第一部分。

我建议您采用的一种方法是：

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

在处理程序中更改dataTarget状态时，它将导致组件重新呈现，并且ErrorComponent将显示。

请参考此处：

单击后将数据目标属性添加到按钮元素

1 个答案: