Question

我正在尝试创建一个简单的待办事项列表应用程序。问题是，当我渲染复选框时，它不会根据值进行自我检查，而是将自身设置为始终选中。我试图将值更改为“ defaultChecked”而不是“ checked”，但这似乎不起作用。我也尝试在Edge，Chrome，Mozila中测试应用程序，并且它们都显示相同的错误。这是 App.jsx 的代码：

import React from "react"

const wishes = [
{name: "Travel to the moon",
done:"false"},

{name:"Pay the gym",
done:"true"},

{name:"Go to the gym",
done:"false"}
]

const App = () => <div>
<h1>My wishlist</h1>
<fieldset>
    <legend>New Wish</legend>
    <input placeholder="Enter wish here"></input>
</fieldset>
<ul>
    {wishes.map(({name,done})=>(
        <li>
            <label>{name}:{done}</label>
            <input type="checkbox" defaultChecked={done}/>
        </li>
    ))}
</ul>
<button type="button">Archive done</button>
</div>

export default App;

非常感谢您！

Answer 1

const wishes = [
{name: "Travel to the moon",
done:"false"},

{name:"Pay the gym",
done:"true"},

{name:"Go to the gym",
done:"false"}
]

done是一个字符串，当用作复选框的true值时，将转换为defaultChecked 。您需要使用布尔值done: true或done: false

反应复选框值未正确显示

1 个答案: