在REACT中使用ANTD动态添加规则输入

Question

我需要自动向输入添加规则。我想获取对象并添加规则，或多或少类似于下面的代码，但这不起作用，我无法做类似的事情。

任何人都可以给我任何想法吗？

const [form] = Form.useForm();

form.getFieldInstance("username").rules=[
          {
            required: true,
            message: 'Please input your username!',
          },
   ]; 

Answer 1

尝试将字段规则转换为状态数组：

const [form] = Form.useForm()
const [formItemRules, setFormItemRules] = useState([])

// find the best moment to update rules
setFormItemRules(() => ([{
  required: true, 
  message: 'Please input your username!'
}]))


<Form.Item
  label={'...'}
  name={'...'}
  rules={ formItemRules }
>
  <Input />
</Form.Item>

您还可以使用包含所有表单项规则的对象：

const [formRules, setFormRules] = useState({
  username: [],
  otherField: []
})

setFormRules((current) => ({
  ...current,
  username: [{
    required: true, 
    message: 'Please input your username!'
  }]
}))

<Form.Item
  label={'...'}
  name={'...'}
  rules={ formRules.username }
>
  <Input />
</Form.Item>