Antd 表单不识别输入值

Question

我用 antd 创建了我的 React 表单。我为表单添加了 antd 验证。但是我的表格不知道我是否填写了表格。每当我填写表格并提交时，它都不会调用 onFinish 方法。相反，它失败并调用 onFinishFailed 方法并给我验证错误消息。

我根据我的知识以正确的方式创建了它。但我认为缺少一些东西。这是我的代码。

const [name, setName] = useState('');
const [description, setDescription] = useState('');
const history = useHistory();

const [form] = Form.useForm();
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8 },
};

const onChangeName = (e) => {
    setName(e.target.value);
    console.log(name);
}

const onAddCategory = (values) => {
    let req = {
        "name": values.name,
        "description": values.description
    }
    postCategory(req).then((response) => {
        if (response.status === 201) {
            message.success('Category created successfully');
            history.push('/categorylist');
        }
    }).catch((error) => {
        console.log(error);
        message.error('Oops, error occured while adding category. Please try again');
    });
}

const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
    console.log('State:', name, description);
};

return (
    <React.Fragment>
        <Form
            form={form}
            name="control-hooks"
            onFinish={onAddCategory}
            onFinishFailed={onFinishFailed}
            {...layout}
            size="large"
        >
            <Form.Item
                name="name"
                rules={[
                    {
                        required: true,
                        message: 'You can’t keep this as empty'
                    }, {
                        max: 100,
                        message: 'The category name is too lengthy.',
                    }
                ]}
            >
                <label>Category name</label>
                <Input
                    placeholder="Category name"
                    className="form-control"
                    value={name}
                    onChange={onChangeName}
                />
            </Form.Item>
            <Form.Item
                name="description"
                rules={[
                    {
                        required: true,
                        message: 'You can’t keep this as empty'
                    }, {
                        max: 250,
                        message: 'The description is too lengthy',
                    }
                ]}
            >
                <label>Description</label>
                <Input.TextArea
                    placeholder="Description"
                    className="form-control"
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                />
            </Form.Item>
            <Form.Item shouldUpdate={true}>
                <Button
                    type="primary"
                    htmlType="submit"
                    className="btn btn-primary"
                >
                    Add category
                </Button>
            </Form.Item>
        </Form>
    </React.Fragment>
)

在这个表格中，我使用 hooks 管理状态。在 onFinishFailed 方法中，我用状态记录了我的输入值，它们有值。但是表格没有识别它。

我该如何解决这个问题。请帮忙。

Answer 1

我发现了问题。在这里，我在表单项中添加了标签。这是意外行为的原因。一旦我把标签放在表单项目之外，问题就解决了。

<label>Category name</label>
<Form.Item
  name="name"
  rules={[
      {
          required: true,
          message: 'You can’t keep this as empty'
      }, {
          max: 100,
          message: 'The category name is too lengthy.',
      }
   ]}
 >
  <Input
    placeholder="Category name"
    className="form-control"
    value={name}
    onChange={onChangeName}
  />
</Form.Item>

Antd 表单不识别输入值

Antd form doesn't identify input values

reactjs

antd

react-hooks