выберите в реакции не обновить ярлык - PullRequest
Новая
       59

выберите в реакции не обновить ярлык

0 голосов
/ 28 января 2020

Когда я реализовал, все работало нормально: 

 constructor() {
        super(...arguments);
        this.state={
          selectedValue :'' ,
}}

Раскрывающийся код: 

            <select
            className="ui dropdown"
          value={this.state.selectedValue || ''}
          onChange={e =>
            this.setState({
              selectedValue: e.target.value,
              validationError:
                e.target.value === ""
                  ? "You must select"
                  : ""
            })
          }>
          <option value="">--Select Station--</option>
          {this.state.stationList.map(team => (
            <option key={team.id} value={team.id}>
              {team.station}
            </option>
          ))}
        </select>

Теперь при выборе метки значения не обновляется в первый раз, Второй раз я нажимаю он показывает с выбранной предыдущей меткой и при следующем щелчке по предыдущей последней метке отображается

Как мне сделать так, чтобы она работала правильно, как обычно, на выбранной метке должно обновиться!

см. видео здесь для ошибки метки > видео

Ответы [ 2 ]

0 голосов
/ 14 февраля 2020

я не знаю, это не должно работать, но я попытался использовать 

forcepdate()

, оно работало с предупреждениями, поэтому я сделал: 

 value={this.updateFunc(this.state.selectedValue)}

и назвал его так: 

updateFunc(e){
console(e);
}

Я не думаю, что это правильный подход, но сейчас это работает для меня, поэтому я go с этим, состояние не обновляется немедленно, идея использования forceUpdate () привела меня к этому решению.

0 голосов
/ 28 января 2020

ваш код работает хорошо, я думаю, что это проблема в вашем массиве

проверьте этот код в песочнице кода

проверьте данный код

или вы можете увидеть это 

class App extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      selectedValue: ""
    };
  }
  myArray = [
    { id: "1", name: "one" },
    { id: "2", name: "two" },
    { id: "3", name: "three" }
  ];

  render() {
    console.log(this.state.selectedValue);
    return (
      <div>
        <h1>are you listening</h1>
        <select
          className="ui dropdown"
          value={this.state.selectedValue}
          onChange={e =>
            this.setState({
              selectedValue: e.target.value,
              validationError: e.target.value === "" ? "You must select" : ""
            })
          }
        >
          <option value="">--Select Station--</option>
          {this.myArray.map(team => (
            <option key={team.id} value={team.id}>
              {team.name}
            </option>
          ))}
        </select>
      </div>
    );
  }
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

надеюсь, это поможет

...