javascript - 如何在不接受此 Prop 的组件中传递 "onChange"？

Question

我正在使用来自 this link 的代码出于切换语言的目的，但我尝试对其进行调整以使用 Material 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 Prop :

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 属性。你可以用那个。点击事件处理程序可以是这样的:

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

可以引用here for Menu examples .