如何解决如何以Redux形式映射字段选择选项?
我试图映射一个数组,这样我就不会在一个特定的选择中编码200个代码。这是我的代码。 const location = [{{id:'A'},......最多200个id:值]
<FormControl fullWidth={true}>
<Field name='location'
component={renderSelectField}
option={location.map((location,index) => (<option value={location.id}>{location.id}</option>))}
props={{size: 'small',type: 'text',variant: 'outlined'
}}
/>
</FormControl>
const renderSelectField = ({input,label,Meta: {touched,error},children}) => (
<Select
floatinglabeltext={label}
errortext={touched && error ? 1 : 0}
{...input}
onChange={(value) => input.onChange(value)}
children={children}/>
);
instead of coding these:
{/* <option/>*/}
{/* <option value='A'>A</option>*/}
{/* <option value='B'>B</option>*/}
..... up to 200
我也尝试过退货,但不起作用。
解决方法
您必须使用MenuItem而不是Field元素中的Option对其进行映射
{Location.map((location,index) => (
<MenuItem key={index} value={location.id}>
{location.id}
</MenuItem>
))}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。