如何从事件处理程序内部设置上下文(使用新的ReactJs上下文API)?

时间:2018-04-26 22:52:38

标签: javascript reactjs react-context

我有一个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个变量,我只想设置其中一个)。

0 个答案:

没有答案