Question

我正在使用react-bootstrap下拉列表。根据{{3}}，当选择了一个下拉项时，eventKey道具将被传递到onSelect处理程序。

我试图将eventKey设置为一个对象，并将其传递给我的handleSelect(e)处理程序，但是当我console.log()将该值传递给我的处理程序时，它给了我一个字符串[object Object]。

我的组件看起来像这样：

const CustomDropdown = props => {
  function handleSelect(e) {
    console.log(e); 
    //I expect this to print { name: 'genre', label: 'Genres' } but 
    //it prints '[object Object]'
  }

  return (
    <Dropdown>
      <Dropdown.Toggle as={React.Button} variant="link" id="dropdown-basic">
        {props.text}
      </Dropdown.Toggle>

      <Dropdown.Menu>
        {props.choices.map((choice, i) => (    //choices is an array of objects
          <Dropdown.Item
            key={i}
            eventKey={choice}        //The object I'm passing in. See below
            onSelect={handleSelect}>
            {choice.label}
          </Dropdown.Item>
        ))}
      </Dropdown.Menu>
    </Dropdown>
  );
};

choice对象如下：

{
  name: 'genre',
  label: 'Genres',
}

但是，如果我将我的onSelect={handleSelect}道具替换为箭头函数onSelect={() => handleSelect(choice)}，该对象将正确地传递给handleSelect，就像我想要的那样。为什么箭头函数方法传递对象，而原始方法却不传递对象？

将对象道具传递给onSelect回调无法按预期方式工作

0 个答案: