如果未更改默认值，antd 表单项验证将失败

Question

antd我的 React 组件中有以下形式。默认值来自 props，我将在提交时更改 redux 存储。但是，如果用户不更改输入值并按下“保存”，验证将失败，并且在控制台日志中我得到 util.js:19 async-validator: ["'title' is required"]

<Form name="title" onFinish={this.submitEdit} >
    <Form.Item name="title" rules={[{ required: true, message: 'Required field' }]}>
        <Input defaultValue={this.props.title} placeholder="Enter entry title"/>
    </Form.Item>
    <div>
        <Button type="primary" htmlType="submit">Save</Button>
        <Button onClick={this.cancelEdit}>Cancel</Button>
    </div>
</Form>

我对 antd 日历控件也有类似的问题。尝试编写自定义验证器，但看起来如果没有任何更改，输入值未定义。我有机会让它发挥作用吗？

Answer 1

是的，根据这里的文档，您需要使用该initialValue道具<Form.Item>然后它就可以工作。

<Form name="title" onFinish={this.submitEdit} >
    <Form.Item
      name="title"
      rules={[{ required: true, message: 'Required field' }]} 
      initialValue={this.props.title}
      >
        <Input placeholder="Enter entry title"/>
    </Form.Item>
    <div>
        <Button type="primary" htmlType="submit">Save</Button>
        <Button onClick={this.cancelEdit}>Cancel</Button>
    </div>
</Form>

干杯。