Select combobox mode always shows the selected option's value instead of label when used together with Form and the provided this.props.form.getFieldProps method
See original GitHub issueWhat you did
Use Select combobox mode together with Form (already wrapped by Form.create()) and the provided this.props.form.getFieldProps method, try to select one option with integer value and string label (e.g. <Option value="1">jack</Option>).
class Test extends Component {
render() {
return (
<Form horizontal>
<FormItem
label="Select 选择器:"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required>
<Select combobox
style={{ width: 200 }}
{...this.props.form.getFieldProps('name')}>
<Option value="1">jack</Option>
<Option value="2">lucy</Option>
<Option value="3" disabled>disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
</FormItem>
</Form>
);
}
}
Test = Form.create({})(Test);
What you would like to happen
The select shows the option label I selected (e.g. jack).
What actually happened
Yet the select shows the value actually (e.g. 1).
Environment Information
- The version of antd: 0.12.13
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:5 (1 by maintainers)
Top Results From Across the Web
React-select does not show the selected value in the field
The values when selected are stored in the state via portfolioSelector function. The problem is that when i select a value it wasn't...
Read more >Using Formik to Handle Forms in React - CSS-Tricks
We're going to build a form together in this post. We'll start with a React component then integrate Formik while demonstrating the way...
Read more >Tutorial - Formik
Welcome to the Formik tutorial. This will teach you everything you need to know to build simple and complex forms in React. If...
Read more >useController | React Hook Form - Simple React forms validation
Additionally, it shares the same props and methods as Controller . It's useful for creating reusable Controlled input. Props. The following table contains ......
Read more >A guide to React forms and events using Formik
As you can see in the code block above, the input element has a value of inputValue , which means the value of...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Yes that should solve the problem, and I’ve been already doing so.
Yet I don’t think this is what it’s designed for. While if I use other types of Select in this case, we could set different values for the ‘value’ prop and children, but I just couldn’t do the same for combobox (and the combobox select works well if used alone without Form), I think this is obviously an issue.
Why there is a requirement for the value and the label specifications separately, since they must be the same? I am on the same page with @HyczZhu . This behavior seems not satisfying Selector component’s expectations.