Question

我正在尝试将react.js与material-ui一起使用。但是，我的事件处理程序似乎不起作用。

例如，我尝试使用样板素材js文件：（https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/lists/NestedList.js）

handleclick 功能在我的应用程序中不起作用（即，单击它不会折叠列表）。

主要区别在于我在jsx文件而不是js中使用了代码（但是，将文件更改为js并不能解决问题）。

我的代码：

import React, {Component} from 'react'
import { List, ListItem, ListItemText, Collapse, Typography } from '@material-ui/core'
import { ExpandLess, ExpandMore } from '@material-ui/icons'
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.secondary,
  },
  nested: {
    paddingLeft: theme.spacing.unit * 4,
  },
});

class NestedList extends Component {
  constructor(props){
    super(props);
    this.state = { open: true };
  };

  handleClick = () => {
    this.setState(state => ({ open: !this.state.open }));
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <List
          component="nav"
        >
          <ListItem>
            <ListItemText 
              disableTypography
              primary={<Typography type="subheadling" style={{ color: 'white' }}>Favourite</Typography>} 
            />
          </ListItem>
          <ListItem button onClick={this.handleClick}>
            <ListItemText 
                disableTypography
                primary={<Typography type="subheadling" style={{ color: 'white' }}>Playlists</Typography>} 
            />
            {this.state.open ? <ExpandLess style={{ color: 'white' }} /> : <ExpandMore style={{ color: 'white' }} />}
          </ListItem>
          <Collapse in={this.state.open} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              <ListItem button className={classes.nested}>
                <ListItemText 
                  disableTypography
                  primary={<Typography type="subheadling" style={{ color: 'white' }}>{`p1`}</Typography>} 
                />
              </ListItem>
              <ListItem button className={classes.nested}>
                <ListItemText 
                    disableTypography
                    primary={<Typography type="subheadling" style={{ color: 'white' }}>{`p2`}</Typography>} 
                />
              </ListItem>
            </List>
          </Collapse>
        </List>
      </div>
    );
  }
}

export default withStyles(styles)(NestedList);

更新我怀疑 onClick 事件出了问题，因为在浏览器中click未列为事件侦听器。

Answer 1

这是您的代码的有效示例： https://codesandbox.io/s/k2nkj8705r

以下两种解决方案都不是您想要的，但是您可能需要注意以下几点：

使用handleEvent = () => {}是babel-plugin-transform-class-properties的一部分。这为您提供了隐式绑定，因此您不必自己绑定它。否则，通常您将不得不像下面这样写不同。

  handleClick {
    this.setState(state => ({ open: !this.state.open }));
  };

然后，每当需要使用它时，您都有两个选择。通过bind的选项1。您可以在constructor中进行此操作。

this.handleClick = this.handleClick.bind(this);

或（例如{{1}中的onClick）。另一种方法是为每个实例创建一个新函数，效率不高。

div

虽然没有问题，但setState就像这样。

<div onClick={() => this.handleClick()}>Click me</div>

调用handleClick = () => { this.setState({ open: !this.state.open }); };时，只需传递一个对象。

Answer 2

您忘记将handleClick绑定到构造函数上，请将此行添加到构造函数this.handleClick = this.handleClick.bind(this);的底部。

我只是注意到您使用handleClick = () => { ... }，如果正确配置了babel，将不再需要绑定，但是请尝试一下，让我知道它是否有效

Answer 3

感谢大家的帮助。我非常感谢@Leogoesger和@CaseyC的帮助。让我意识到代码中的工作以及在哪里调试错误。

事件处理程序不起作用的原因是因为我只在服务器端渲染了Material-ui文件，而{[type]: entity}剥离了所有事件处理程序。

我按照此处的说明进行操作：https://material-ui.com/guides/server-rendering/，并设法使我的应用正常工作。

React.js和Material ui-handleclick函数不起作用

3 个答案: