select Set Initial Value Action in antd Form Form

  • 2021-09-11 19:33:23
  • OfStack

I won't talk too much, let's just look at the code ~


<Form.Item label=" Action object ">
      {getFieldDecorator('targetId', { initialValue: this.state.targetId }, {
       rules: [{
        required: false,
        message: ' Action object '
       }]
      })(
       <Select placeholder=" Please select the action object ">
        {targetList.map(entity => <Option key={entity.id} value={entity.id}>{entity.name}</Option>)}
       </Select>
      )}
     </Form.Item>

Add an initial value in getFieldDecorator ('targetId') instead of adding an initial value in the select tag

Additional knowledge: Solve the problem that antd forms can't get default values

Use the 4. x version of antd to set the initial value for the form, but you can't get the value

If you need to set the default value and display it on the page, you need to set two places:

Set defaultValue, which is to be displayed on the page, for example:


<Form.Item label="Sex" name="sex" valuePropName="checked">
 // Here's defaultValue
 <Radio.Group defaultValue={1}>
 <Radio value={1}> Male </Radio>
 <Radio value={0}> Female </Radio>
 </Radio.Group>
</Form.Item>

Set initialValues, which is used to get the form value, for example:


<Form
 name="basic"
 onFinish={this.onFinish}
 onFinishFailed={this.onFinishFailed}
 initialValues={{
  sex: 1
 }}
 >
 <Form.Item label="Sex" name="sex" valuePropName="checked">
  <Radio.Group defaultValue={1}>
  <Radio value={1}> Male </Radio>
  <Radio value={0}> Female </Radio>
  </Radio.Group>
 </Form.Item>

 <Form.Item {...tailLayout}>
  <Button type="primary" htmlType="submit">
  register
  </Button>
 </Form.Item>
 </Form>

Related articles: