Как я могу передать "onChange" в компоненте, который не принимает этот реквизит?

Question

Я использую код из этой ссылки с целью переключения языка, но я попытался адаптировать его для использования материальных компонентов пользовательского интерфейса для стилизации.Смена языка работает, но при каждом изменении она возвращает меня на домашнюю страницу, потому что используемый мной компонент 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>
)

Вы можете проверить в codeandbox, важный файл здесь src / component / language.js: https://codesandbox.io/s/mo75j2jxyx

Answer 1

MenuItem имеет onClick проп.Вы можете использовать это.Обработчик события щелчка может выглядеть следующим образом:

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

Здесь вы можете обратиться к для примеров меню .