时间戳

首页 > 解决方案 > .map 中反应单选按钮的条件显示/隐藏

javascript - .map 中反应单选按钮的条件显示/隐藏

问题描述

我有一个单选按钮，当它为真/选中时，它将该选项显示为选择。我遇到的问题是，在我的无线电组映射中，所有选项都被选为 true。这是一个代码框示例 - https://codesandbox.io/s/73k0onx32x

  <RadioGroup
    aria-label="matches"
    name="matches"
    value={String(this.state.value)}
    onChange={this.handlePersonToggle}
  >
    {data.map(person => (
      <FormControlLabel
        onClick={e => this.setState({ checked: !this.state.checked })}
        checked={this.state.checked}
        key={String(person.Id)}
        value={String(person.Id)}
        control={<Radio color="primary" />}
        label={
          <div>
            {this.state.checked === true && <div>if true show</div>}
          </div>
        }
      />
    ))}
  </RadioGroup>

任何帮助将不胜感激。

标签： javascriptreactjs

解决方案

这是工作演示：https ://codesandbox.io/s/l261qp002m

在此处输入图像描述

最终代码

class RadioButtonsGroup extends React.Component {
  state = {
    value: 1
  };

  handlePersonToggle = event => {
    // console.log(typeof event.target.value)   //string
    this.setState({ value: event.target.value });
  };

  render() {
    const { classes } = this.props;
    return (
      <RadioGroup
        aria-label="matches"
        name="matches"
        value={String(this.state.value)}
      >
        {data.map(person => {
          return (
            <FormControlLabel
              onClick={e => this.handlePersonToggle(e)}
              key={String(person.Id)}
              value={String(person.Id)}
              control={<Radio color="primary" />}
              label={
                <div>
                  {this.state.value == person.Id ? <div>if true show</div> : ""}
                </div>
              }
            />
          );
        })}
      </RadioGroup>
    );
  }
}

有几件事我们需要解决。

首先，我们不需要组件的checked属性，FormControlLabel也不需要管理检查的状态，只要和组件的value属性就足够了，只要它们匹配，它就会知道选择了哪个选项。RadioGroupFormControlLabel

其次，由于我们正在传递 String(this.state.value)，因此，我们event.target.value成为 astring而不是 a integer。因此，我们不能使用严格比较===，而是使用了==。

最后，我们为组件onClick上的事件编写事件处理程序。FormControlLabel

推荐阅读