英文:
React Autocomplete component; how to not pass the event in the onChange method?
问题
我已经将一个自动完成组件添加到我的React页面中。代码如下：
class Koppel extends Component<PropsType, State> {
constructor(props: PropsType) {
super(props);
this.state = {
geviUnCombis: new Array<GeviUnCombi>()
};
}
public render() {
const { classes } = this.props;
return (
<div className={classes.autoSuggest}>
<Autocomplete
ListboxProps={{ style: { maxHeight: 200, overflow: 'auto' } }}
disablePortal
autoHighlight={true}
options={this.props.geviUnCombis}
onChange={(event, value) => this.onSelect(event, value)}
getOptionLabel={(geviUnCombi) => (geviUnCombi.geviCode ? geviUnCombi.geviCode : "") + "/" + geviUnCombi.unCode}
renderInput={(input) => <TextField {...input} label="Type"/>}
/>
</div>
);
}
private onSelect(event, value) {
this.props.functies.create(value);
}
}
这段代码做了它应该做的事情，除了一个小问题。OnChange 传递了一个 SyntheticEvent<Element, Event> 和一个 GeviUnCombi（选项，我需要的内容）。
然而，我无法弄清楚如何只传递值，而不是事件。我觉得这应该很容易，已经在React文档和Stack Overflow上搜索了如何做到这一点的示例代码，但所有的示例代码都与我拥有的Autocomplete完全不同。我觉得这个问题可能有一个特定的词汇或术语，可惜我不知道。
我尝试过 onChange={(value) => this.onSelect(value)}，但结果只传递了SyntheticEvent。如果有人能帮我，我将永远感激不尽！
英文:
I have added an Autocomplete component to my React page. It looks like this:
class Koppel extends Component<PropsType, State> {
constructor(props: PropsType) {
super(props);
this.state = {
geviUnCombis: new Array<GeviUnCombi>()
};
}
public render() {
const { classes } = this.props;
return (
<div className={classes.autoSuggest}>
<Autocomplete
ListboxProps={{ style: { maxHeight: 200, overflow: 'auto' } }}
disablePortal
autoHighlight={true}
options={this.props.geviUnCombis}
onChange={(event, value) => this.onSelect(event, value)}
getOptionLabel={(geviUnCombi) => (geviUnCombi.geviCode ? geviUnCombi.geviCode : "") + "/" + geviUnCombi.unCode}
renderInput={(input) => <TextField {...input} label="Type"/>}
/>
</div>
);
}
private onSelect(event, value) {
this.props.functies.create(value);
}
}
This code does what it's supposed to, except for 1 small problem. OnChange passes both a SyntheticEvent<Element, Event> and a GeviUnCombi (the option, what I need).
However, I can't figure out how to only pass the value, not the event. I feel like it should be easy, and have searched on how to do it both in the React documentation and on SO, but all example code implements the Autocomplete totally different from what I have. I feel like there's a specific word / term for the issue which I sadly don't know.
I tried doing onChange={(value) => this.onSelect(value)}, but this resulted in only the SyntheticEvent being given. If someone could help me I'd be eternally grateful!
答案1
得分: 0
尼古拉斯·塔尔在评论中解释说，使用下划线解决了这个问题。工作中的代码：
onChange={(_event, value) => this.onSelect(value)}
英文:
As explained by Nicholas Tower in the comments, using an underscore solved the problem. Working code:
onChange={(_event, value) => this.onSelect(value)}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论