我正在使用来自 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
最佳答案
MenuItem 有一个 onClick
属性。你可以用那个。点击事件处理程序可以是这样的:
handleClick = event => {
const { value } = event.currentTarget;
};
可以引用here for Menu examples .
关于javascript - 如何在不接受此 Prop 的组件中传递 "onChange"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53407074/