Question

我创建了一个状态，在该状态下我将传递“ ItemId”的值

constructor(){
    this.state = {
        item: ''
    }
}

这是我声明“ ItemId”的地方

renderItems = () => {
return ['item1', 'item2', 'item3'].map(ItemId => (
    <Menu.Item
        key={ItemId}
        value={ItemId}
        onClick={this.handleItem}
    >
        <Link>
            {ItemId}
        </Link>
    </Menu.Item>
  ));
}

这是我得到错误的地方

handleItem = e => {
  this.setState({
      item: e.target.value,
  })
  console.log('item: ', e.target.value)
}

render() {
  return(
     <Menu>
        {this.renderItems()}
     </Menu>
  );
}

Answer 1

由于您使用的是AntD Menu.Item组件。您必须知道它不会将事件对象传递回onClick事件的回调函数。而是使用以下键传递对象： item, key, keyPath, domEvent

并且由于您希望将项目设置为状态，因此可以仅使用对象中的key

handleItem = ({key}) => {

    this.setState({
        item: key,
    })
    console.log('item: ', key)

}

Answer 2

我认为，您对如何将itemId传递到handleItem感到很困惑，然后您认为该值应该来自e.target.value。

但是对于您的情况，您只需要像我一样将其传递到句柄即可，它就会按预期运行

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      item: ""
    };
  }

  handleItem = item => {
    this.setState({ item }, () => {
      console.log("item > ", this.state.item);
    });
  };

  renderItems = () => {
    return ["item1", "item2", "item3"].map(item => (
      <Menu.Item key={item} value={item} onClick={() => this.handleItem(item)}>
        <a>{item}</a>
      </Menu.Item>
    ));
  };

  render() {
    return <Menu>{this.renderItems()}</Menu>;
  }
}

export default App;

旁注：要使console.log来检查状态，我需要将其写入setState回调函数中，因为setState是异步运行的。

TypeError：无法读取未定义的属性“值”-REACTJS

2 个答案: