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

你说“关注焦点” - 这是否意味着它会在模糊时清除？如果是这样，将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}
  />

如何使用redux-react反应选择？

1 个答案: