反应选择不适用于移动浏览器

问题描述

我在带有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>
  )
};