Antd 表单无法识别输入值答案

【问题标题】：Antd form doesn't identify input valuesAntd 表单无法识别输入值
【发布时间】：2021-06-27 08:18:40
【问题描述】：

我用antd 创建了我的反应表单。我为表单添加了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 方法中，我已经用状态记录了我的输入值并且它们具有值。但是表单并不能识别它。

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

【问题讨论】：

标签： reactjs react-hooks antd

【解决方案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>

【讨论】：