Question

我有一个 react、redux 项目，在这个特定页面上，用户可以通过选中或取消选中复选框来更新他/她的可用性。

在本例中，我从数据库中提取用户上次记录的提交时间为星期六。我通过 redux 获取它，然后访问该状态以绘制时隙。

这一切正常，事实上，一旦呈现框，我就无法将框状态从选中更改为未选中，反之亦然。

我想知道是不是因为 checked 与 redux 状态相关联？

注意： onChange 目前已就位，但不需要使用，因此可以在需要时进行更改。

const [availableTimeTrue, setAvailableTimeTrue] = useState([]) //not in use

const insAvail = useSelector((state) => state.instructorAvailabilityGet)
const { loading, error, availability } = insAvail
const availableTimeAll = availability ? availability.availAll : []
const {
    availSun,
    availMon,
    availTues,
    availWed,
    availThurs,
    availFri,
    availSat,
} = availability ? availability : []


<Form>
    {availSat.map((time) => (
        <Form.Check
            type='checkbox'
            checked={time.status}
            key={time.uuid}
            name={
            moment(selectedWeekDays[0]).format('DDMMMYY') + '_' + String(time)}
            label={time.timeslot}
            onChange={(e) => setAvailableTimes(e.target.name)} //not in use
            />
    ))}
<Button variant='primary' type='submit'>
Submit
</Button>
</Form>

感谢任何指导

Answer 1

见controlled-components和uncontrolled-components

大多数时候您应该使用 controlled-components，这就是您现在所做的。在这种情况下，您应该在用户与组件交互时更新相应的状态值，React 会使用更新后的状态重新渲染它。

在这个特定的例子中，setAvailableTimes 应该更新 time.status

无法更改复选框状态

1 个答案: