Невозможно изменить значение по умолчанию для поля реакции-выбора - PullRequest
Новая
       45

Невозможно изменить значение по умолчанию для поля реакции-выбора

0 голосов
/ 01 ноября 2018

Я использую redux-form и у меня есть пользовательский компонент, который использует Reaction-select .

Я создал раскрывающийся список с предварительно заполненными параметрами, а также позволяет настраивать ввод данных в этом раскрывающемся списке. Я использую компонент " creatable " изact-select.

Я хочу иметь возможность использовать один из параметров в качестве значения по умолчанию при первой загрузке, этот параметр будет также выделен в раскрывающемся списке, если он выбран. Я достиг этого, но единственная проблема в том, что, если я выберу новое значение или создаю новое значение, оно останется значением по умолчанию - хотя json действительно изменится на правильное значение.

Вот мой пример кода и ящика - https://codesandbox.io/s/jvzko04ok3

В моем примере вы увидите, что Jim выбран по умолчанию, но как только вы измените опцию select на что-то другое, значения json изменятся, а представление не изменится. Почувствуйте, что это проблема onBlur или onChange.

В течение нескольких лет в версиях реагирования на выбор были изменения версии, значение по умолчанию можно указать с помощью value или defaultValue. 

  <CreatableSelect
    {...props}
    options={props.options}
    onChange={value => input.onChange(value)}
    onBlur={() => input.onBlur(input.value)}
    value={props.options[1]}
  />

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Вдохновлен принятым ответом Стивса. Я преобразовал свой компонент без сохранения состояния в компонент класса, присвоил ему состояние по умолчанию и обработал onChange.

Вот коды для других, которым может понадобиться решение - https://codesandbox.io/s/kyr9mwpr5

Из этого: 

const LastNameSelectInput = ({ input, ...props }) => (
  <CreatableSelect
    {...props}
    options={props.options}
    // menuIsOpen={true}
    onChange={value => input.onChange(value)}
    onBlur={() => input.onBlur(input.value)}
    value={props.options[1]}
  />
);

к этому: 

  class LastNameSelectInput extends React.Component {
  constructor(props) {
    super(props);
  }

  state = { value: this.props.options[1] };

  render() {
    const { input, options } = this.props;
    return (
      <CreatableSelect
        options={options}
        // menuIsOpen={true}
        onChange={value => {
          let newValue = input.onChange(value);
          this.setState({ value: newValue });
        }}
        onBlur={() => input.onBlur(input.value)}
        value={this.state.value}
      />
    );
  }
}
0 голосов
/ 01 ноября 2018

Это потому, что вы привязали value опору непосредственно к props.options[1], что не меняется. Лучше привязать его к переменной состояния, для которой по умолчанию задана опция, и ваш onChange обновит переменную состояния.

...