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

У меня есть компонент выбора реакции, который не распознает параметр значения по умолчанию. Код выглядит следующим образом:

renderPlans(){
        if(this.props.plans){
            let list =  this.props.plans.map(item=>{
                return ({label:item.description, value:item.id})
            });

            return(
                <Select
                    name= "tile-plans"
                    value= {this.state.selected}
                    classNamePrefix='react-select-container'
                    options={list}
                    defaultValue={list[0]}
                    onChange={(e) => { e ? this.setState({selected: e.value}) : this.setState({selected: ''}) }}
                />
            )
        }
    }

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

Это не повторяющийся вопрос, поскольку я знаю, что вы можете сделать это так: value= {this.state.selected ? this.state.selected:list[0].label}, но это не работает. Вход остается пустым при загрузке.


reactjs javascript react-select
person KAT    schedule 08.08.2018    source источник
comment
Возможный дубликат Как установить значение по умолчанию в react-select< /а>   -  person imjared    schedule 08.08.2018
comment
это не дубликат этого вопроса. Я не пытаюсь понять, как поместить статическую строку в раздел значений или данные-заполнители. Мне нужен первоначальный выбор первого выбора.   -  person KAT    schedule 08.08.2018

Ответы (1)


arrow_upward
1
arrow_downward

В документации говорится, что «Если вы не предоставляете эти реквизиты, вы можете установить начальное значение состояния, которое они контролируют», ссылаясь, среди прочего, на предоставленный вами реквизит value.

Вы можете установить selected на первый элемент в list при создании компонента.

Пример

class App extends React.Component {
  state = {
    selected: this.props.list[0]
  };

  handleChange = selected => {
    this.setState({ selected });
  };

  render() {
    const { selected } = this.state;

    return (
      <Select
        value={selected}
        onChange={this.handleChange}
        options={this.props.list}
      />
    );
  }
}

ReactDOM.render(
  <App
    list={[
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry" },
      { value: "vanilla", label: "Vanilla" }
    ]}
  />,
  document.getElementById("root")
);
person Tholle    schedule 08.08.2018
comment
Думаю, вам нужно this.setState({selected: selectedOption }); . демонстрация не позволяет отображать изменения в противном случае - person charlietfl; 08.08.2018
comment
@charlietfl Опс, спасибо. Я пытался быть умным и сопоставлять имена переменных, но забыл одно из них. - person Tholle; 08.08.2018
comment
Я всем сердцем понимаю, почему это должно работать, и с модом об этом действительно работает в песочнице. НО не в реальном коде. Я даже попробовал минимальное значение = {привет}, чтобы увидеть, будет ли он просто выплевывать это, и я все еще получаю текст-заполнитель Select... в выборе при загрузке. - person KAT; 08.08.2018
comment
@KyleT Не могли бы вы создать CodeSandbox, изолируя неправильное поведение, с которым вы сталкиваетесь? Так вам будет легче помочь. - person Tholle; 08.08.2018
comment
поигрался с вашим кодом в песочнице и смог разобраться. Спасибо, Толле, ты сегодня спас мне жизнь. - person KAT; 08.08.2018