从redux-form中的select/option字段获取值的方法如下:
<Field>
组件来创建select/option字段,并设置相应的属性,如name
、component
等。component
属性中,传入一个自定义的组件或使用redux-form提供的内置组件,如<select>
。<select>
组件中,使用onChange
事件来监听字段值的变化。onChange
事件处理函数中,通过event.target.value
来获取选择的值。change
方法来更新字段的值。示例代码如下:
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const MyForm = props => {
const { handleSubmit } = props;
const handleSelectChange = event => {
const selectedValue = event.target.value;
// 将选择的值存储到Redux的store中
props.change('fieldName', selectedValue);
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="fieldName">Field Name</label>
<Field name="fieldName" component="select" onChange={handleSelectChange}>
<option value="">Select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</Field>
</div>
<button type="submit">Submit</button>
</form>
);
};
// 使用reduxForm高阶组件包装表单
const ReduxForm = reduxForm({
form: 'myForm'
})(MyForm);
export default ReduxForm;
在上述示例中,通过props.change('fieldName', selectedValue)
将选择的值存储到Redux的store中的fieldName
字段中。你可以根据实际需求修改字段名和选项的值。
腾讯云相关产品推荐:无
注意:本回答不涉及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。
领取专属 10元无门槛券
手把手带您无忧上云