Question

我在一个组件中工作，如果我点击NavItem我渲染另一个元素列表

改变状态的功能

handleClick() {
  this.setState({
    isActive: !this.state.isActive
  });
};

条件渲染

if (isActive) {
  SubList = <List hasIcons style="secondary"><ListItem><NavItem href={desktopUrl} title={title}><Icon name={name} />{title}</NavItem></ListItem></List>
}

List NavItem和{{SubList}}

<ListItem>
    <NavItem isActive href={desktopUrl} title={title} onClick={this.handleClick}>
        <Icon name={name} />
        {title}
    </NavItem>
    {SubList}
</ListItem>

这里是整个组件

export default class SportNavItem extends React.Component {

    constructor() {
      super();
      this.state = {isActive: false};
      // This binding is necessary to make `this` work in the callback
      this.handleClick = this.handleClick.bind(this);
    };

    handleClick() {
      this.setState({
        isActive: !this.state.isActive
      });
    };

    render () {

      const { title, desktopUrl, isActive,  name  } = this.props.data;
      // props.childItems; { title, name, isActive, url }

      // const itemId = `nav-${slugEn}`;
      const style = isActive ? 'primary' : 'default';

      let SubList = null;

      if (isActive) {
        SubList = <List hasIcons style="secondary"><ListItem><NavItem isActive href={desktopUrl} title={title}><Icon name={name} />{title}</NavItem></ListItem></List>
      }

      return (
        <List hasIcons style={style}>
            <ListItem>
                <NavItem isActive href={desktopUrl} title={title} onClick={this.handleClick}>
                    <Icon name={name} />
                    {title}
                </NavItem>
                {SubList}
            </ListItem>
        </List>
      );
    }
};

导出的组件

const sampleData = {
  title: 'Football',
  name: 'football',
  isActive: true,
  desktopUrl: '#'
}

ReactDOM.render(
    <div>
        <SportNavItem data = { sampleData }/>
    </div>,
    document.getElementById('app')
);

如果我手动将状态isActive更改为false，我可以呈现SubList。我无法实现处理状态onClick，我在控制台中看不到错误。可能有什么问题？还有更好的方法吗？

Answer 1

您正试图阅读isActive中的this.props.data：

const { title, desktopUrl, isActive,  name  } = this.props.data;

...但isActive位于this.state。改为改为：

const { title, desktopUrl, name } = this.props.data;
const { isActive } = this.state;

Answer 2

@ pacob建议

首先，您的变量isActive是state而不是prop。你应该像

一样使用它

const { title, desktopUrl, name  } = this.props.data;
const {isActive} = this.state;

其次，如果NavItem是您创建的自定义组件，则onClick={this.handleClick}不会在onClick上设置NavItem事件，而不是将onClick作为道具传递给NavItem组件。在NavItem组件中，您可以在div上创建一个onClick事件，该事件将从道具调用onClick函数，从而调用this.handleClick。如果您查看NavItem中的ReactBootstrap组件。它有一个onClick道具基本上和我上面提到的一样

从技术上讲，您不能在任何组件上发生onClick事件。您可以将NavItem包装在div中，然后在该div上设置onClick事件

     <ListItem>
         <div onClick={this.handleClick}>   
            <NavItem isActive href={desktopUrl} title={title} >
                <Icon name={name} />
                {title}
            </NavItem>
            {SubList}
         </div>
    </ListItem>

Answer 3

您不能onClick自定义组件。使用具有onClick方法的div包装NavItem。

使用状态

3 个答案: