[英]React JS: Pass event inside onChange drop down (Ant Design)
我的表格中有一个下拉列表( https://ant.design/components/select )。 在这个选择下拉列表中,我有onChange来调用一个函数。 在'onChange'里面我想把这个事件作为参数传递给我的函数。 问题是:当onChange发生时,只传递选定的值,但我想要整个事件。
这是代码:
export default class MyForm extends Component {
constructor() {
super();
this.handleOnChange = this.handleOnChange.bind(this);
}
handleOnChange = (event) => {
console.log(event); // here I'm receiving only the value selected (1 or 2)
}
render() {
render(
<Form>
<Select onChange={this.handleOnChange}>
<Option value="1">text 1</Option>
<Option value="2">text 2</Option>
</Select>
</Form>
)
}
}
在console.log()中,我只收到所选的值。 有没有办法将整个事件对象传递给函数handleOnChange()?
我找到了解决方案。 只需使用:onSelect(),传递值和事件。
handleOnChange = (value, event) => {
...code here
}
render() {
render(
<Form>
<Select onSelect={(value, event) => this.handleOnChange(value, event)}>
<Option value="1">text 1</Option>
<Option value="2">text 2</Option>
</Select>
</Form>
)
}
您使用的Select
组件是处理onChange
并调用“外部”函数的组件。
您可以尝试使用函数内的合成事件变量,它可能有效:
handleOnChange = (selectedValue) => {
console.log(selectedValue); // The value from the inner component
console.log(event); // usually you have access to this variable
}
试试这个,如果你不想在Select onSelect / onChange的回调中绑定:
toggleActive = name => event => {
console.log("name: ",name) // prints "name: Active!"
console.log("event: ",event) // event is some data
}
<Select
mode="multiple"
style={{ width: '91%' }}
placeholder="Stuff"
value={this.props.value}
onChange={this.toggleActive("Active!")}
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.