React Select установил неправильное значение - PullRequest
Новая
       7

React Select установил неправильное значение

0 голосов
/ 15 октября 2018

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

const SelectField = (props) => {
  const { id } = props;
  return (
    <Select
      id={id}
      value={this.state[id]}
      onChange={(value) => { this.onChangeValue({ target: { id, value } }); }}
      options={options[id]}
      placeholder="Please select..."
    />
  );
};

И я использую его таким образом: 

<SelectField id="gender" />

Метод onChangeValue обрабатывает setState всех входных данных: 

onChangeValue(e) {
  const { id, value } = e.target;
  this.setState({ [id]: value });
}

Поскольку react-select по какой-то странной причине не возвращает eventЯ просто эмулировал передачу данных, которые мне нужны.

Эта версия кода, кажется, работает должным образом, если я выбираю что-то, я могу правильно видеть правильное значение во входных данных.К сожалению, в состоянии это значение не является правильным, это должно быть string, но это полный вариант: { label: 'Gender', value: 'Male'}.

Так что здесь я уже не понимаю, как react-select может отображать Male если результатом значения является этот объект.

Если я изменю onChange, как показано ниже: 

onChange={(value) => { this.onChangeValue({ target: { id, value: value.value } }); }}

Это будет иметь больше смысла для меня, так как я напрямую передаюправильное значение для значения, установленного в состоянии.

Внезапно это не работает вообще.Если я выберу опцию, на входе по-прежнему будет отображаться заполнитель, но да, состояние будет правильным.

Я попытался добавить несколько обходных путей, но ни один не работает должным образом.

Мне нужно отобразитьВыделенное значение для выбора, а также для того, чтобы в моем примере для гендера была строка со значением, а не весь объект ...

Что я здесь не так делаю?Идеи?Приветствия

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Вот более подробный ответ из моего предыдущего комментария: 

class SelectField extends React.Component {

    state = {
        id: this.props.id
    };

    onChangeValue = id => value {
        this.setState({ [id]: value });
    }

    render() {
        const { id } = this.state;
        return (
            <Select
                id={id}
                value={this.state[id]}
                onChange={this.onChangeValue(id)}
                options={options[id]} // unsure where options came from.
                placeholder="Please select..."
            />
        );
    }
}
0 голосов
/ 15 октября 2018

К сожалению, response-select хочет, чтобы весь объект был выбранным значением.По сути, у вас есть 2 варианта:

  1. Сохранить весь объект в том же состоянии, в каком вы сейчас находитесь.Вы можете просто вернуть значение любой другой заинтересованной стороне.

  2. Хранить только значение в состоянии.Когда вы передаете значение для реагирования-выбора, вам нужно будет выполнить поиск по вашим опциям

    value = {options [id] .find (opt => opt.value === this.state [id] .value)}

Также нет причин хранить его в состоянии [id].Вы можете просто сохранить его как state.value или selectedValue, поскольку это единственная вещь, которая будет в состоянии для этого компонента.

...