首页 > 解决方案 > 如何从事件处理程序内部设置上下文(使用新的 ReactJs 上下文 API)?

问题描述

我有一个 ReactJS 选择,用户在其中选择与应用程序版本相关的选项。我想为选择的选项 id 设置一个应用程序上下文变量。

AppContext.js:

export const AppContext = React.createContext({
  versions: null,
  currentVersion: null
});

VersionChooser.js(组件):

class VersionChooser extends Component {
    static propTypes = {
        context: PropTypes.object.isRequired
    }

    handleSelectChange = event => {
        let context = {
          currentVersion: event.target.value
        }
          /////////// WHAT TO DO HERE TO SET CONTEXT ///////////
          <AppContext.Provider value={context}>
          </AppContext.Provider>
    };

    render = () => {

        let options = this.props.context.versions.map(item => {
            return (
                <option key={item.id} value={item.id}>
                    {item.name}
                </option>
            );
        });

        return (
                <select value={this.props.context.currentVersion} onChange={this.handleSelectChange}>
                    {options}
                </select>
            </div>
        );
    };
}

export default VersionChooser;

我需要帮助currentVersion在我的handleSelectChange处理程序中设置上下文变量(修复上下文有 2 个变量,我只想设置其中一个)。

标签: javascriptreactjsreact-context

解决方案


推荐阅读