React - значение выбора ванили не обновляется - PullRequest
Новая
       5

React - значение выбора ванили не обновляется

0 голосов
/ 26 марта 2020

У меня есть простой ванильный выбор в моем компоненте:

Содержимое. js: 

state = {
    langValue: 'fr'
};

handleChange = event => {
    const newValue = event.target.value;
    this.setState({ value: newValue }, () =>
        this.props.onChangeLanguage(newValue)
    );
};

render() {
  return (
      <select value={this.state.langValue} onChange={this.handleChange}>
          <option value="fr">Français</option>
          <option value="en">English</option>
      </select>
  );
}

Вызван метод onChangeLanguage, и переводы обновлены, но значение выбора равно не меняется Если я удаляю обратный вызов в установленном состоянии, значение выбора обновляется, но язык не обновляется (что нормально)

Приложение. js: 

...

let i18nConfig = {
    locale: navigator.language.split(/[-_]/)[0],
    messages: getMessagesFromLang(navigator.language.split(/[-_]/)[0])
};

const [lang, setLang] = React.useState(i18nConfig.locale); // keeps state of lang in App
function onChangeLanguage(lang) {
    setLang(lang); // changes the lang when selec value changes
}

...

1 Ответ

1 голос
/ 26 марта 2020

Вы устанавливаете свойство состояния value: 

this.setState({ value: newValue }

, но затем используете его как langValue

<select value={this.state.langValue} onChange={this.handleChange}>

Измените одно на другое, и оно будет работать .

Что касается вашего комментария, фрагмент кода ниже доказывает, что код работает, как и ожидалось. Если у вас возникли проблемы с тем, что значение select не обновляется, я думаю, это побочный эффект функции prop. 

class Example extends React.Component {
  state = {
      langValue: 'fr'
  };

  handleChange = event => {
      const newValue = event.target.value;
      this.setState({ langValue: newValue }, () =>
          console.log('call your prop function')
      );
  };

  render() {
    return (
        <select value={this.state.langValue} onChange={this.handleChange}>
            <option value="fr">Français</option>
            <option value="en">English</option>
        </select>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));
<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>
<div id="root"/>
...