React：使用 antd 将复选框设置为检查更新表单

Question

我在表单上使用 Ant Design。
有复选框的用户。当我检查它们时，会显示用户详细信息输入并设置值。
在更新表单上，我想设置复选框 checked = true 并显示在创建表单上检查的用户的详细信息输入。

最好的方法是什么？

    <Form.Item name="employeeIds">
      <Checkbox.Group style={{ width: "100%" }}>
         <Row>
         {props.employees.map((employee) => (
            <Col key={employee.id} span={6}>
              <Checkbox defaultChecked={employee.id} onChange={(e) => 
               selectEmployees(e, employee.name, employee.surname)} value={employee.id}>
                                {employee.name} {employee.surname}
                            </Checkbox>
                        </Col>
                    ))}
                </Row>
            </Checkbox.Group>
        </Form.Item>

 {selectedEmployees?.map((i, b) => (
    <Card>
       <Row>
        <Col span={5}>
         <label> {i.employeeName}:</label>
          </Col>
           <Col >
            <Form.Item
              {...b}
              name={[b, 'employeeId']}
              >
         <Input/> 
           </Form.Item>
             </Col>
                </Row>
                     </Card>  
                )   )}


const selectEmployees = (e, employeeName, employeeSurname) => {
    var fullName = employeeName + " " + employeeSurname
    if (!selectedEmployees.some(person => person.id == e.target.value)) {
        setSelectedEmployees(prev => [...prev, {
            employeeName: fullName,
            id: e.target.value
        }]);
    }
    else {
        setSelectedEmployees(selectedEmployees.filter(item => item.id !== e.target.value))
    }
}

Answer 1

您有items 的列表以及是否已选择其中任何一个。假设我们使用一个单独的数组来跟踪选择。

  const [selection, seSelection] = useState([])

当您单击复选框时，它会添加或删除该项目，具体取决于它是否已在选择中。

  const onCheck = (item) => {
    if (selection.includes(item)) {
      setSelection(selection.filter(v => v !== item))
    } else {
      setSelection([...selection, item])
    }    
  }

将此事件与复选框联系起来，

<Checkbox onChange={onCheck} />

现在您可以显示选择。

  selection.map(item => { render })

这是一个简单的例子。最好的方法是将选中的标志发送到onCheck

  const onCheck = (item, selected) => {

这样您就不会在复选框和您的选择之间遇到同步问题。