e.target.disabled = true 如果同一函数中存在 useState Hook 则不起作用

Question

我有两张桌子挨着。左边的表包含一个add按钮，该按钮将内容从左边的表传递到右边的表。

一旦这个过程完成，按钮必须被禁用，它应该从一个不同的类继承一个不同的样式。

const [recordsRight, setRecordsRight] = useState([]);
<TableBody className = "leftTable">
{
recordsLeft === null ?
[]
:
recordsLeft.map((item, index) => (
//<TableCell></TableCell> //Table Contents
<button className="addToggle" id={"addToggle" + index} onClick={(e) => handleAddSwitch(e, item)}>
<CircleCheckIcon />
Add
</button>
))
}
</TableBody>
<TableBody className = "rightTable">
{
recordsRight === null ?
[]
:
recordsRight.map((item, index) => (
//<TableCell></TableCell> //Same Table Contents
))
}
</TableBody>
function handleAddSwitch(e, item) {
e.target.disabled = true;
e.target.className = "addToggle2";

let newRecordsRight = [...recordsRight];
newRecordsRight.push(item);
setRecordsRight(newRecordsRight);

}
.addToggle{
background: green;
}
.addToggle2{
background: grey;
}

当我从handleAddSwitch函数中删除setRecordsRight行时，按钮的颜色改变并且它被禁用。

但是，一旦我再次添加它，这个过程停止工作，我将能够从左到右一次又一次地添加相同的项目。我该怎么办?

Answer 1

您应该在组件状态中存储disabled/enabled标志(作为item的标志，或者作为item的一些唯一标识符关键的标志的单独映射)，而不是直接修改DOM。(这不仅适用于按钮上的disabled标志，它通常适用于任何(在渲染的DOM中)。原因是，如果你直接修改了DOM，那么你的组件会因为任何原因被重新渲染，React会覆盖你的DOM修改。

下面是一个简化的例子:

const {useState} = React;
let nextItemId = 1;
const initialItems = [
{id: nextItemId++, enabled: true},
{id: nextItemId++, enabled: true},
{id: nextItemId++, enabled: true},
{id: nextItemId++, enabled: true},
];
const Example = () => {
const [items, setItems] = useState(initialItems);

const addItem = () => {
setItems(items => [...items, {
id: nextItemId++,
enabled: true,
}]);
};

const toggleItem = itemToToggle => {
setItems(items => items.map(item => {
if (item.id === itemToToggle.id) {
item = {...item, enabled: !item.enabled};
}
return item;
}));
};

return <div>
{items.map(item => (
<div className="item" key={item.id} onClick={() => toggleItem(item)}>
Item {item.id}: {item.enabled ? "Enabled - click to disable" : "Disabled - click to enable"}
</div>
))}
<input type="button" onClick={addItem} value="Add item" />
</div>;
};
ReactDOM.render(<Example />, document.getElementById("root"));

.item {
user-select: none;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>