單擊后將數據目標屬性添加到按鈕元素

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 。
• 有條件地在render()渲染<ErrorComponent />

當處理程序內部的dataTarget狀態更改時，它將導致組件重新呈現，並且ErrorComponent將顯示。

請參考這里：

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