我有一个复选框。如果选中此复选框,则应该选中表单检查。但这对我不起作用。我有以下代码:
import React, { useState } from 'react'
import { Row, Form, Container } from 'react-bootstrap'
import subMenu from '../subMenu.js'
function TestScreen() {
const [test1, setTest1] = useState(subMenu)
const subMenuHandler = (e) => {
let sMenu = test1
sMenu.forEach(sm => {
if (sm._id === Number(e.target.value))
sm.isChecked = e.target.checked
})
setTest1(sMenu)
}
这是我的表格:
return (
<Container fluid>
<Row className="mx-xs-auto">
<Form>
<div key='default-checkbox' className="mb-3" >
{test1.map(sm => (
<Form.Check
type="checkbox"
id={sm._id}
label={sm.nama}
key={sm._id}
value={sm._id}
checked={sm.isChecked}
onChange={subMenuHandler}
/>
))}
</div>
</Form>
</Row>
</Container >
)
stat isChecked已成功更改为true,但formcheck未更改为checked,
这是我的数据:
const subMenu = [
{
_id: 1,
nama: 'submenu-1',
category: 'Electronics',
harga: 89.99,
id_menu: 1,
isChecked: false
},
{
_id: 2,
nama: 'submenu-2',
category: 'Electronics',
harga: 89.99,
id_menu: 1,
isChecked: false
},
{
_id: 3,
nama: 'submenu-3',
harga: 599.99,
id_menu: 2,
isChecked: false
},
]
在状态isChecked已更改为true,那么我在哪里错了?我不懂
代替let sMenu = test1
,做,let sMenu = [...test1]
在更新状态之前,请对其进行复制,以便react可以检测到新的对象引用可用于触发重新渲染。
在较早的方式中,您只是使用不同的变量名指向同一对象(数组也是一个对象)。
在更深入地研究任何UI框架之前,还应该对JS中的基元和非基元有更多的了解。涉及对象时,另一个重要概念是浅复制与深复制。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句