Question

我在组件中有一个简单的香草选择：

Content.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方法并更新翻译，但是select的值未更改。如果我在设置状态下删除了回调，则选择值正在更新，但语言未更新（正常）

App.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
}

...

Answer 1

您正在设置value的状态属性：

this.setState({ value: newValue }

但随后将其用作langValue

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

更改一个以匹配另一个，它将起作用。

关于您的评论，下面的代码片段证明了按原样运行的代码。如果您对选择值无法更新有疑问，我想这一定是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"/>

反应-香草选择值不更新

1 个答案: