如何在不接受此道具的组件中传递“ onChange”?

时间:2018-11-21 07:23:25

标签: javascript reactjs material-ui

我正在使用this link中的代码来切换语言,但是我尝试对其进行调整以使用实质性的UI组件进行样式设置。更改语言是可行的,但是每次更改都会使我回到主页,因为与原始代码中的选择不同,我使用的# features/support/env.rb require 'selenium-webdriver' Capybara.register_driver :chrome do |app| options = Selenium::WebDriver::Chrome::Options.new(args: %w[no-sandbox]) options.headless! if tddium? Capybara::Selenium::Driver.new(app, browser: :chrome, options: options) end Capybara.javascript_driver = :chrome 组件不接受MenuList道具。

我的问题是:如何在该第三方组件中传递onChange道具?

原始代码:

onChange

我的变体因为MenuList不接受import React, { Component } from 'react' import PropTypes from 'prop-types' class Language extends Component { static contextTypes = { language: PropTypes.object, } state = { value: '', } componentDidMount() { const { language } = this.context this.setState({ value: language.locale || language.detected, }) } handleChange = event => { const { language } = this.context const { originalPath } = language const { value } = event.target if (value === this.state.value) { return } this.setState({ value }, () => { localStorage.setItem('language', value) window.location.href = `/${value}${originalPath}` }) } render() { const { language } = this.context const { languages } = language const { value } = this.state if (!value) { return null } return ( <select value={value} onChange={this.handleChange}> {languages.map(({ value, text }) => ( <option key={value} value={value}> {text} </option> ))} </select> ) } } export default Language 道具而不能真正起作用:

onChange

您可以在codesandbox中签入,这里的重要文件是src / component / language.js:https://codesandbox.io/s/mo75j2jxyx

1 个答案:

答案 0 :(得分:1)

MenuItem具有一个onClick道具。您可以使用它。点击事件处理程序可以是这样的:

handleClick = event => {
    const { value } = event.currentTarget;
};

您可以参考here for Menu examples