javascript - Reactjs - OnClick 模式弹出窗口

Question

我正在学习Reactjs并面临一个小问题。

在表格单元格内，我创建了一个按钮并单击，它应该弹出一个模式。

<td className="">
    <div className="radio">
    {(() => {
            return (item.ElectionOptions.split(",").map((item1, index1) =>
            <label key={index1} className="radio-inline">
                <input type="radio" id={index} value={item1}
                checked={item.Election===item1}
                onChange={this.handleOptionChange}
                />{item1}
            </label>
            ))
    })()}
    </div>
    <div>
        {(() => {
            if (roleUpdate) {
                return (<button fontSize="20px" data-toggle="modal" onClick={this.handleEditOptions(item)}>Edit Options</button>)
            }
        })()}
    </div>
</td>

handleEditOption是单独创建的:

handleEditOptions = (item) => {
        var modal = (<VotingOptionModal resolutiondata = {item} />);
        ReactDOM.render(modal, document.getElementById('x-modal'));

    }

问题是:当我重新加载页面时，弹出模式会自行出现(这不应该发生)，就好像我已经单击了按钮一样。此外，我随后关闭了模式，然后单击按钮，模式没有出现。我认为事件处理程序有问题。但不确定我应该如何解决它。

请帮忙。谢谢。

Answer 1

在这一行中:

return (<button fontSize="20px" data-toggle="modal" onClick={this.handleEditOptions(item)}>Edit Options</button>)

您正在执行 onClick={this.handleEditOptions(item)} ，它正在运行该函数。

相反，请尝试onClick={() => this.handleEditOptions(item)}。