表格内的按钮根本不起作用

Question

我有一个按钮，当我点击它时会改变它在表格中的状态，当我加载页面并点击任何一个时，它只会激活上面的第一个而其他的不会，而且它也不会返回到以前的状态，我想知道我做错了什么。

在上图中，当我点击任何一个时，它只会激活第一个并且不会将其停用，

而且3号已经激活了，我不能动，我觉得地图有问题什么的……

{
    this.state.dataSource.map((data) => {
        function ChangeIcon(e) {
            e.preventDefault();
            if (data.statusPedido === "Em aberto") {
                var btn = document.getElementById("btn-times");
                btn.style.display = "none";

                var btn2 = document.getElementById("btn-check");
                btn2.style.display = "block";
            }
        }
        return (
            <tr>
                <td>{data.nrPedido}</td>
                <td>{data.dataPedido}</td>
                <td>{data.dtEntrega}</td>
                <td>{data.totalDoses}</td>
                <td>{data.totalDosesConvencionais}</td>
                <td>{data.totalDosesCervicais}</td>
                <td>{data.rota}</td>
                <td>{data.periodoLactacao}</td>
                <td>{data.plantelMatrizes}</td>
                <td>{data.porcentagemReposicaoLeitoas}</td>

                <td>
                    {data.statusPedido === "Em aberto" ? (
                        <div>
                            <button
                                className="btn"
                                onClick={ChangeIcon}
                                style={{ backgroundColor: "transparent" }}
                                id="btn-times"
                            >
                                <FontAwesome name="times" />
                            </button>
                            <button
                                className="btn"
                                id="btn-check"
                                style={{ display: "none", backgroundColor: "transparent" }}
                            >
                                <FontAwesome name="check" />
                            </button>
                        </div>
                    ) : (
                        <button
                            className="btn"
                            style={{ backgroundColor: "transparent" }}
                            id="btn-check"
                        >
                            <FontAwesome name="check" />{" "}
                        </button>
                    )}
                </td>
            </tr>
        );
    });
}

Answer 1

在您的示例中，您呈现了由 map 函数生成的元素列表，但您忘记为元素分配键（在您的情况下为 tr）。键帮助 React 识别哪些项目已更改、添加或删除。如果没有键，你可能会遇到很多难以捕捉的错误，因为 React 不知道要更新哪一行。键的最佳选择是标识此表中每一行的 ID 或其他唯一字符串。

Answer 2

你是对的！问题在于 map 方法。原因是您没有为每个返回的元素提供唯一的键属性。 你可以这样修复它：

{
    // Add an index argument
    this.state.dataSource.map((data, index) => {
        function ChangeIcon(e) {
            e.preventDefault();
            if (data.statusPedido === "Em aberto") {
                var btn = document.getElementById("btn-times");
                btn.style.display = "none";

                var btn2 = document.getElementById("btn-check");
                btn2.style.display = "block";
            }
        }
        return (
        // Use that index here as key property
            <tr key={index}>
                <td>{data.nrPedido}</td>
                <td>{data.dataPedido}</td>
                <td>{data.dtEntrega}</td>
                <td>{data.totalDoses}</td>
                <td>{data.totalDosesConvencionais}</td>
                <td>{data.totalDosesCervicais}</td>
                <td>{data.rota}</td>
                <td>{data.periodoLactacao}</td>
                <td>{data.plantelMatrizes}</td>
                <td>{data.porcentagemReposicaoLeitoas}</td>

                <td>
                    {data.statusPedido === "Em aberto" ? (
                        <div>
                            <button
                                className="btn"
                                onClick={ChangeIcon}
                                style={{ backgroundColor: "transparent" }}
                                id="btn-times"
                            >
                                <FontAwesome name="times" />
                            </button>
                            <button
                                className="btn"
                                id="btn-check"
                                style={{ display: "none", backgroundColor: "transparent" }}
                            >
                                <FontAwesome name="check" />
                            </button>
                        </div>
                    ) : (
                        <button
                            className="btn"
                            style={{ backgroundColor: "transparent" }}
                            id="btn-check"
                        >
                            <FontAwesome name="check" />{" "}
                        </button>
                    )}
                </td>
            </tr>
        );
    });
}

要了解更多关于 React 中的 Lists 和 Keys，你可以查看The official documentation

Answer 3

我认为这与您正在执行的条件渲染有关。在这种情况下，试试这个：

{data.statusPedido === "Em aberto" ? (
                        <button
                            className="btn"
                            onClick={ChangeIcon}
                            style={{ backgroundColor: "transparent" }}
                            id="btn-times"
                        >
                            <FontAwesome name="times" />
                        </button>
                ) : (
                   <button
                            className="btn"
                            id="btn-check"
                            style={{ display: "none", backgroundColor: "transparent" }}
                        >
                            <FontAwesome name="check" />
                        </button>
                )}

现在，它将返回“检查”按钮或“X”按钮。另外：

• 避免用大写字母命名函数，这是为类保留的。您的代码仍然可以工作，但它不符合标准。
• 您甚至不需要调用 event.preventDefault()，因为按钮没有“提交”或“清除”输入等默认行为。