Question

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

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

count value "table"

handleEditOption是单独创建的：

<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>

问题是：当我重新加载页面时，弹出模式单独出现（这不应该发生），好像我已经点击了按钮。此外，我随后关闭了模态，然后单击按钮，模态不会出现。我认为事件处理程序有问题。但不知道我应该如何解决它。

请帮忙。谢谢。

Answer 1

在这一行：

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

你正在运行正在运行该功能的onClick={this.handleEditOptions(item)}。

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

Answer 2

onClick={() => this.handleEditOptions(item)}

将解决此问题。

onClick期望函数为值。写onClick={this.handleEditOptions(item)}会将this.handleEditOptions(item)的结果作为值。

因此，此处的解决方法是将此方法调用包装为匿名函数

Answer 3

当您编写functionName()时，将调用该函数并运行该函数。然而，如果单独编写functionName，则函数的值将被传递，并且它将被运行onClick。所以你可以写

onClick={() => handleEditOptions(item)}

在此，匿名函数将传递给onClick，该函数将仅在Click上运行。

Reactjs - OnClick模式弹出窗口

3 个答案: