时间戳

首页 > 解决方案 > ReactJS - 单击时更改属性值

javascript - ReactJS - 单击时更改属性值

问题描述

我正在使用 ReactJS 框架开发一个 Web 应用程序。

我正在尝试编写一个事件，当我单击集合中的一个元素时，它会将所选属性的值更改为 true，并将其余元素设置为 false。

<NavigationButton to="/" label="Dashboard" exact>
<MenuItem className={classes.menuItem} selected={true/false}>
    <ListItemIcon className={classes.icon}>
        <Home />
    </ListItemIcon>
    <ListItemText classes={{ primary: classes.primary }} inset primary="Strona główna" />
</MenuItem>
</NavigationButton>
<NavigationButton to="/payment" label="Payment" exact>
<MenuItem className={classes.menuItem} selected={true/false}>
    <ListItemIcon className={classes.icon}>
        <Payment />
    </ListItemIcon>
    <ListItemText classes={{ primary: classes.primary }} inset primary="Moje płatności" />
</MenuItem>
</NavigationButton>

我该怎么做呢？

标签： javascriptreactjs

解决方案

我认为最好的方法是将所有组件包含在一个有状态的组件中，该组件将跟踪您的哪些元素被选中或未选中。然后，该组件将具有一个函数（类似于handleClick），该函数将接收该按钮类并setState更改为现在应该选择的元素。现在您可以将函数和状态（当前假定选择的内容）作为道具传递给子元素和 onClick，它将触发对父组件的回调，告诉它setState. 然后在每个单独的组件中，您可以检查是否应该选择道具this.props.currentSelect === ${name of the element}来查看是否应该选择它们的元素

// some jsx file
class StatefulComponent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      currentlySelect: "someMenuItem"
    }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(str){
    this.setState({
      currentlySelect: str
    })
  }

  render(){
    return(
      <React.Fragment>
        <NavigationButton to="/" label="Dashboard" exact>
          <MenuItem handleClick={this.handleClick} currentlySelect={this.state.currentlySelect}  className={classes.menuItem} selected={true / false}>
            <ListItemIcon className={classes.icon}>
              <Home />
            </ListItemIcon>
            <ListItemText classes={{ primary: classes.primary }} inset primary="Strona główna" />
          </MenuItem>
        </NavigationButton>
        <NavigationButton to="/payment" label="Payment" exact>
          <MenuItem handleClick={this.handleClick} currentlySelect={this.state.currentlySelect} className={classes.menuItem} selected={true / false}>
            <ListItemIcon className={classes.icon}>
              <Payment />
            </ListItemIcon>
            <ListItemText classes={{ primary: classes.primary }} inset primary="Moje płatności" />
          </MenuItem>
        </NavigationButton>
      </React.Fragment>
    )
  }

}

推荐阅读