React-select 不适用于移动浏览器

Question

我在带有 Redux-Form 的表单上使用 React-Select。一切都适用于桌面浏览器（firefox 和 chrome）。当我在移动设备上测试时，selected 值没有显示。该值未传递给 Select 输入组件

下面的代码是Select输入组件：

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.

Answer 1

下面的组件适用于移动和桌面浏览器

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>
  )
};

React-select 不适用于移动浏览器

React-select not working on mobile browsers

reactjs

react-select

redux

redux-form