Question

我有一个表单组件，将有状态数组中的所有contacts显示为复选框选项。如果选中了关联的复选框，则应将联系人传递到newGroup.groupContacts中，如果未选中，则同样应将其删除。在handleCheckbox中包括执行此操作的语法是什么？

const CreateGroupForm = props => {

    const defaultForm = { id: null, groupName: '', groupContacts: [] }

    const [newGroup, setNewGroup] = useState(defaultForm)

    const handleInputChange = event => {
        const { name, value } = event.target 
        setNewGroup({ ...newGroup, [name]: value })
    }

    const handleCheckbox = event => {
        console.log('called')
        const {value} = event.target
        console.log(event.target)
        setNewGroup({...newGroup, groupContacts: [...newGroup.groupContacts, value] })

    }

    const handleSubmit = event => {
        event.preventDefault()

        if (!newGroup.groupName || !newGroup.groupContacts) return

        props.addGroup(newGroup)

        setNewGroup(defaultForm)

    }

    return (
        <div>
            <h2>Create a Group</h2>
            <Form onSubmit={handleSubmit}>
                <Form.Group >
                    <Form.Label>Group Name</Form.Label>
                    <Form.Control 
                        type="text" 
                        name="firstName" 
                        onChange={handleInputChange} 
                        placeholder="First Name" 
                        value={newGroup.name} 
                    />
                </Form.Group>
                <Form.Group >
                {props.contacts.map(contact => (
                    <div className="mb-3" key={contact.id}>
                        <Form.Check 
                            onChange={handleCheckbox}
                            type='checkbox'
                            label={`${contact.firstName} ${contact.lastName}`}
                            value={contact}
                        />
                    </div>
                ))}
                </Form.Group>
                <Button type="submit">Submit</Button>
                <Button>Cancel</Button>
            </Form>
        </div> 
    )
}

export default CreateGroupForm

Answer 1

因此，在查看您的函数时，我想它正在将其添加到状态中而不是将其删除。

对于您的Form.Check元素，请传递ID而不是整个联系人：

                        <Form.Check 
                            onChange={handleCheckbox}
                            type='checkbox'
                            label={`${contact.firstName} ${contact.lastName}`}
                            value={contact.id}
                        />

处理事件检查/取消检查：

const handleCheckbox = event => {
  const { value } = event.target;
  const intValue = parseInt(value, 10);
  let newGroupContacts = [...newGroup.groupContacts];
  const contactExists = newGroupContacts.find(contact => contact.id === intValue);

  if (contactExists) {
    newGroupContacts = newGroupContacts.filter(contact => contact.id !== intValue);
  } else {
    const contact = props.contacts.find(contact => contact.id === intValue)
    newGroupContacts = [...newGroupContacts, contact];
  }

  setNewGroup({...newGroup, groupContacts: newGroupContacts });
}

我希望代码能够解决问题并为您可读。

将动态复选框的值存储到状态挂钩中

1 个答案: