React JS:在onChange下拉传递事件(Ant设计)

时间:2017-08-15 00:30:16

标签: javascript reactjs

我的表格中有一个下拉列表(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()?

3 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:1)

您使用的Select组件是处理onChange并呼叫您的&#34;外部&#34;功能

您可以尝试使用函数内部的合成事件变量,它可能有效:

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

答案 2 :(得分:0)

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