如何在 React 中单独单击按钮使输入字段可编辑？

Question

我有一些数据来自我在用户界面上显示的数据库。 但我想通过单击按钮使这些字段可编辑。 为了更好地理解，我在下面添加了图片。

默认视图

单击编辑按钮后

正如您从图片中看到的那样，我想要这样的东西：当我单击编辑按钮时，相应的字段变得可编辑，并且编辑按钮更改为保存按钮。 而当点击保存按钮时，数据会被提交到一个 API，并且视图会和以前一样改变。 我怎样才能做到这一点。

这是我的简单代码

 <div className="col-sm-10 d-flex align-items-center">
    <input
    className="form-control mx-1"
    value={item.name}
    disabled
    />
    <button className="text-end">
        <i
        style={{ color: "blue" }}
        className="fas fa-edit d-block"
        ></i>
    </button>
</div>

Answer 1

您可以使用 state 的 boolean 值，这将触发输入中的禁用部分。

 const [disableButton,setDisableButton] = useState(false)
 
<div className="col-sm-10 d-flex align-items-center">
    <input
    className="form-control mx-1"
    value={item.name}
    disabled={disableButton}
    />
    <button className="text-end" onClick={() => setDisableButton(!disableButton)}>
        <i
        style={{ color: "blue" }}
        className="fas fa-edit d-block"
        ></i>
    </button>
</div>