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

Question

我使用this link中的代码来切换语言，但我尝试使用材质UI组件进行样式化。改变语言是有效的，但它会让我回到每个更改的主页，因为我使用的MenuList组件不接受onChange道具，不像原始代码中的选择。

我的问题是：如何在第三方组件中传递onChange道具？

原始代码：

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

我的变化不起作用，因为MenuList不接受onChange道具：

return (
  <MenuList value={value} onChange={this.handleChange}>
    {languages.map(({ value, text }) => (
      <MenuItem key={value} value={value} >
        <Link to={value}>
          {text}
        </Link>
      </MenuItem>
    ))}
  </MenuList>
)

你可以登入codesandbox，这里的重要文件是src / component / language.js：https://codesandbox.io/s/mo75j2jxyx

Answer 1

MenuItem有一个onClick道具。你可以用它。 click事件处理程序可以是这样的：

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

你可以参考here for Menu examples。