React：使用 antd 清除后将 select 的值设置为 null

Question

我正在我的应用程序中使用 ant design。有形式。

        useEffect(() => {
         ...props.client
        let client = {
            employeeId:props.client?.employee.id
        };

        form.setFieldsValue(client);
       }, [props.client])

更新表单 'employeeId' 字段未发送到后端，但我想将其值设置为空。有人现在有最好的方法吗？

    <Form.Item name="employeeId">
     <Select allowClear>
       {props.employees?.map((employee) => (
         <Option key={employee.id} value={employee.id}>{employee.name}</Option>
           ))}
            </Select>
            </Form.Item>

Answer 1

我觉得你的useEffect可能有点buggy。我不知道 ...props.client 在那里做什么。

它可能有助于解构 client 道具，因为它被使用了很多次。在下面放一个片段，看看它是否适合你。

const Component = (props) => {
  const { client, ...otherProps } = props;

  useEffect(() => {
    // if id is present, use it, else set null. 
    // Notice the use of ?? instead of || here. 
    // That is so that id with value 0 is not ignored as it is falsy in nature
    form.setFieldsValue({ employeeId: client?.employee?.id ?? null });
    }, [client]) 

}

React：使用 antd 清除后将 select 的值设置为 null

React: set select's value to null after clear it using antd

javascript

frontend

reactjs

antd