Как использовать response-select с redux-form?

Я пытаюсь интегрировать реакцию-выбор, используя форму сокращения ...

Вот мой код

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
person Ashh    schedule 31.05.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы говорите «фокусировка вне» - означает ли это, что размытие становится четким? Если да, помогает ли установка onBlurResetsInput и onCloseResetsInput значения false?

Обновление: вот ссылка на таблицу props из readme github. Вы должны установить для onBlurResetsInput и onCloseResetsInput одновременно значение false, onBlurResetsInput, установленный в false, сам по себе ничего не сделает.

А также вам нужно удалить опору onBlur из выбора, которая вызывает очистку поля в Blur

  <Select
    name={input.name}
    value={input.value.value}
    onChange={onChange}
    onBlurResetsInput={false}
    onCloseResetsInput={false}
    onFocus={onFocus}
    options={options}
    {...props}
  />
person twils0    schedule 31.05.2018
comment
@Ashish Вы должны делать и то, и другое одновременно. onBlurResetsInput ничего не делает, если для него установлено значение false, если для onCloseResetsInput также установлено значение false. - person twils0; 31.05.2018