如何使用useRef更新输入defaultvalue(在初始渲染之后?)

Question

const Component = ()=>{
const [list, setList] = useState(getLocalStorage());
const [isEditing, setIsEditing] = useState(false);
const [itemToEdit, setItemToEdit] = useState();
const refContainer = useRef(null);
const putLocalStorage = () => {
localStorage.setItem("list", JSON.stringify(list));
};
const editItem = (id) => {
refContainer.current.focus();
setItemToEdit(() => {
return list.find((item) => item.id === id);
});
setIsEditing(true);
};
const handleSubmit = (e)=>{
e.preventDefault();
let nameValue = refContainer.current.value;
if (isEditing){
setList(list.map((item)=>{
if (item.id === itemToEdit.id){
return {...item, name: nameValue};
}
else {
return item;
}
);
}
else {
let newItem = {
id: new Date().getItem().toString(),
name: nameValue,
}
setList([...list, newItem])
}
nameValue="";
setIsEditing(false);
}

useEffect(() => {
putLocalStorage();
}, [list]);
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" ref={refContainer} defaultValue={isEditing ? itemToEdit.name : ""}/>
<button type="submit">submit</button>
</form>
<div>
{list.map((item) => {
const { id, name } = item;
return (
<div>
<h2>{name}</h2>
<button onClick={() => editItem(id)}>edit</button>
<button onClick={() => deleteItem(id)}>
delete
</button>
</div>
);
})}
</div>
</div>
)
}

所以这部分:

<input type="text" ref={refContainer} defaultValue={isEditing ? itemToEdit.name : ""} />

我想通过在输入上显示itemToEdit来向用户显示他们正在编辑的内容。

它在用户第一次点击编辑按钮时起作用但在此之后，defaultValue不会更改为itemToEdit

你们有什么解决办法吗?(我可以使用控制输入代替，但我想尝试它与useRef只有)

否则，占位符将是唯一的解决方案…

Answer 1

defaultValue属性仅用于初始渲染这就是为什么你想要的行为一次成功，然后就停止了。在这里看到一个类似的问题:React input defaultValue没有't更新状态

仍然使用refs的一个可能的解决方案是使用ref.current.value将itemToEdit名称直接设置为输入值.

const editItem = (id) => {
refContainer.current.focus();
setItemToEdit(() => {
const item = list.find((item) => item.id === id);
refContainer.current.value = item.name;
return item;
});
setIsEditing(true);
};