如何解决反应选择不适用于移动浏览器
我在带有Redux-Form的表单上使用React-Select。一切都可以在桌面浏览器上运行(firefox和chrome)。当我在移动设备上测试时,所选值不会显示。该值未传递给SelectInput组件
下面的代码是SelectInput组件:
const SelectInput = (props) => {
const className = `field required ${props.Meta.error && props.Meta.touched ? 'error' : ''}`
const handleBlur = () => {
setTimeout(() => {
const { input } = props;
input.onBlur(input.value);
},1);
};
return (
<div className={className}>
<Select
{...props}
value={props.input.value}
onChange={value => props.input.onChange(value)}
// onBlur={() => props.input.onBlur(props.input.value)}
onBlur={handleBlur}
options={props.options}
styles={colourStyles}
/>
<div>
{renderError(props.Meta)}
</div>
</div>
)
};
export default SelectInput
这就是我在表格上使用它的方式
<span><b>Gênero</b></span><br></br>
<Field
name='genero'
placeholder="Selecione uma opção"
options={generos}
value={genero}
onChange={handleGeneroChange}
component={SelectInput}
/>
React是版本16.13.1 React-select 3.1.0 Redux-form 8.3.6。
解决方法
以下组件可在移动和桌面浏览器上使用
const SelectInput = (props) => {
const className = `field required ${props.meta.error && props.meta.touched ? 'error' : ''}`
const handleBlur = () => {
setTimeout(() => {
const { input } = props;
input.onBlur(input.value);
},1);
};
return (
<div className={className}>
<Select
{...props}
value = {props.options.filter(item=>item.value === props.input.value)[0]}
onChange={value => props.input.onChange(value)}
onBlur= { event => event.preventDefault()}
options={props.options}
styles={colourStyles}
/>
<div>
{renderError(props.meta)}
</div>
</div>
)
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。