React JS：在 onChange 下拉菜单中传递事件（Ant Design）答案

【问题标题】：React JS: Pass event inside onChange drop down (Ant Design)React JS：在 onChange 下拉菜单中传递事件（Ant Design）
【发布时间】：2017-08-15 00:30:15
【问题描述】：

我的表单中有一个下拉菜单 (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()？

【问题讨论】：

这完全取决于<Select> 组件是如何实现的，因为它是处理函数的调用者。
您的<Select> 中有什么内容？否则它会正常工作 - codesandbox.io/s/4xPyO7zwk

标签： javascript reactjs

【解决方案1】：

我找到了解决方案。只需使用：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>
        )
    }

【讨论】：

是否有演示，我将能够看到这个。因为当我尝试在选择获取错误时使用它时，instance.render 不是函数。
它将选项作为第二个参数传递。我想停止传播。这个被接受的答案究竟如何？

【解决方案2】：

您使用的Select 组件是处理onChange 并调用您的“外部”函数的组件。

您可以尝试在函数中使用合成事件变量，它可能会起作用：

handleOnChange = (selectedValue) => {
    console.log(selectedValue); // The value from the inner component
    console.log(event); // usually you have access to this variable
}

【讨论】：

如何使用我得到的事件停止传播？
取决于您使用的组件/本机 javascript - 提供一些代码示例。
我在下拉列表中使用 ANT 选择组件从选择关闭下拉列表中选择值，该下拉列表具有道具 handleVisibleChange。我认为是因为事件的冒泡
不看例子真的很难理解
看看这个stackoverflow.com/questions/49404943/ant-select-closes-dropdown

【解决方案3】：

如果你不想在 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!")}
>

【讨论】：