React select не выбирает опцию - PullRequest
Новая
       8

React select не выбирает опцию

0 голосов
/ 19 февраля 2019

https://codesandbox.io/s/o7z5rxmq4z

У меня есть песочница с кодом, и это упрощенная версия моего реального приложения.Я пытался нажать на опции, но ни один из них не был выбран в опциях React Select v1.

Это мой контейнерный файл.Если я уберу val в return( <div> <SelectComponent/>, который является значением компонента select, он покажет все, что я выбрал, но мне нужны значения-реквизиты.Мне нужны реквизиты значения, чтобы я мог передать значение на мой сервер.

Также, если я заменим await this.setState({ val: event.value }) на await this.setState({ val: event.val }), компонент покажет выбранную опцию, но val будет неопределенным. 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      val: null
    };
  }

  handleChange = async event => {
    event !== null
      ? await this.setState({ val: event.value })
      : await this.setState({ val: null });
  };
  render() {
    let fruitArray = [
      { value: "apple", label: "Apple" },
      { value: "orange", label: "Orange" },
      { value: "watermelon", label: "Watermelon" }
    ];
    return (
      <div>
        <SelectComponent
          val={this.state.val}      
          select_id="fruit_select_id"
          select_options={fruitArray}
          select_placeholder="Choose a fruit"
          handle_change={this.handleChange}
        />
      </div>
    );
  }
}

Это мой выбранный файл компонента.Я попробовал это и с версией без состояния, но результат тот же, ничего не выбирается.

class SelectComponent extends Component {
  render() {
    const {
      select_id,
      select_options,
      handle_change,
      select_placeholder,
      val
    } = this.props;
    return (
      <div>
        <Select
          value={val}
          id={select_id}
          name={select_id}
          options={select_options}
          onChange={handle_change}
          placeholder={select_placeholder}
          isClearable
        />
      </div>
    );
  }
}

Может кто-нибудь сказать мне, что пошло не так?

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

1 - нет причин для каких-либо асинхронных / ожидающих вещей.Это просто испортит Реакт. 

handleChange = event => this.setState({ val: event.value });

2 - Вы передаете val своему SelectComponent, но вам нужно передать value; 

<SelectComponent
      value={this.state.val}      
      select_id="fruit_select_id"
      select_options={fruitArray}
      select_placeholder="Choose a fruit"
      handle_change={this.handleChange}
/>
0 голосов
/ 19 февраля 2019

Компонент Select хочет, чтобы весь выбранный объект опции был в качестве value проп.Если вы поместите весь объект в состояние вместо только свойства value, оно будет работать. 

handleChange = option => {
  this.setState({ val: option });
};
...