如何将 react-select 与 redux-form 一起使用？答案

【问题标题】：How to use react-select with redux-form?如何将 react-select 与 redux-form 一起使用？
【发布时间】：2018-05-31 14:48:36
【问题描述】：

我正在尝试使用 redux 表单集成 react-select...

这是我的代码

import Select from 'react-select'
import StyledSelectField, { StyledMessages } from './style'

const SelectField = props => {
  const { input, label, placeholder, options, meta, ...StyledProps } = props
  const { onChange, onBlur, onFocus } = props.input
  return (
    <StyledSelectField {...StyledProps} meta={meta} hasValue={!!input.value}>
      <label htmlFor={input.name}>{label}</label>
      {placeholder && <div className="placeholder">{placeholder}</div>}
      <Select
        name={input.name}
        value={input.value.value}
        onChange={onChange}
        onBlur={onBlur}
        onFocus={onFocus}
        options={options}
        {...props}
      />
      <StyledMessages>
        {meta.touched &&
          ((meta.error && <span className="error">{meta.error}</span>) ||
            (meta.warning && <span className="warning">{meta.warning}</span>))}
      </StyledMessages>
    </StyledSelectField>
  )
}

class TestingCycleForm extends PureComponent {
  render() {
    const { preMonitoring, handleChange, handleSubmit } = this.props
    return (<div>
      <Field
        label="18%"
        name="patientPercentage"
        className="form-control"
        component={SelectField}
        options={Config.get('/PATIENT_PERCENTAGE')}
      />
    </div>)
  }
}

一切正常，但我的输入字段被清除，重点是我在这里做错了什么？

在此先感谢...任何帮助将不胜感激

【问题讨论】：

标签： reactjs react-select

【解决方案1】：

您说“聚焦” - 这是否意味着它会在模糊时清除？如果是这样，将 onBlurResetsInput 和 onCloseResetsInput 设置为 false 有帮助吗？

更新：这里是props table from the github readme 的链接。您必须同时将 onBlurResetsInput 和 onCloseResetsInput 设置为 false，onBlurResetsInput 设置为 false，它本身不会执行任何操作。

您还需要从选择中删除 onBlur 道具，这会导致模糊上的字段清除

  <Select
    name={input.name}
    value={input.value.value}
    onChange={onChange}
    onBlurResetsInput={false}
    onCloseResetsInput={false}
    onFocus={onFocus}
    options={options}
    {...props}
  />

【讨论】：

@Ashish 你必须同时做这两件事。 onBlurResetsInput 设置为 false 时不执行任何操作，除非 onCloseResetsInput 也设置为 false。