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

Question

我正在尝试使用 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>)
  }
}

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

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

Answer 1

你说“focus out” - 这是否意味着它在模糊时清晰？如果是这样，将 onBlurResetsInput 和 onCloseResetsInput 设置为 false 有帮助吗？

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

而且您还需要从 select 中移除 onBlur 道具，这会导致 Blur

上的字段清除

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

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

How to use react-select with redux-form?

reactjs

react-select