Question

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

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

elif type.lower() == "kk":
    await bot.send_message(ctx.message.channel, "Knock Knock.")

    check = lambda m: "who's there" in m.content.lower()
    await bot.wait_for_message(author=ctx.message.author, channel=ctx.message.channel, check=check)
    kk = [["A little old lady", "All this time, I did not know you could yodel."],
          ["Cow says", "Cow says mooooo!"],
          ["Etch", "Bless you, friend."],
          ["Robin", "Now hand over the cash."],
          ["Cash", "No thanks, I'll have some peanuts."],
          ["Mustache", "I mustache you a question, but I'll shave it for later."],
          ["Tank", "You're welcome."],
          ["Candice", "Candice door open, or what?"],
          ["Boo", "No need to cry, it's only a joke."],
          ["Howl", "Howl you know unless you open this door?"],
          ["Iran", "Iran all the way here. Let me in already!"]]

    joke_num = random.randint(0, 9)
    chosen_joke = [kk[joke_num][0], kk[joke_num][1]]
    await bot.say(chosen_joke[0])


    check = lambda m: "{} who".format(chosen_joke[0]) in m.content.lower()
    await bot.wait_for_message(author=ctx.message.author, channel=ctx.message.channel, check=check)
    await bot.say(chosen_joke[1])

我该怎么做？

Answer 1

我认为做到这一点的最佳方法是将所有组件包含在有状态的组件中，该组件将跟踪是否选择了哪些元素。然后，该组件将具有一个功能（类似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>
    )
  }

}

ReactJS-单击更改attr值

1 个答案: