时间戳

首页 > 解决方案 > 蚂蚁设计表单initialValue如何使用

javascript - 蚂蚁设计表单initialValue如何使用

问题描述

使用 antd Form initialValue 哪个对？

我想知道，如果 antd form initialValue 用于设置初始数据或仅在表单没有值时显示值。

const Component = ({ id }) => {
  const initialName = 'John'
  const { data } = useQuery(GET_NAME, { variables: { id } })
  if (data) { 
    initialName = data.name 
  }

  return (
  <Form.Item>
    {form.getFieldDecorator('name', { initialValue: initialName })(<Input />)}
   </Form.Item>
 )
}


const Component = ({ id }) => {
  const { data } = useQuery(GET_NAME, {
    variables: { id },
    onCompleted: res => { form.setFieldsValue({ name: res.data.name }) }
  })

  return (
  <Form.Item>
    {form.getFieldDecorator('name', { initialValue: 'John' })(<Input />)}
   </Form.Item>
 )
}

标签： javascriptreactjsantdreact-apollo

解决方案

您应该使用 Form 组件包装您的表单项，并将初始值添加到 Form 而不是 Form.Item。

例如：


<Form
      initialValues={{ username:'default value' }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
    </Form>

推荐阅读