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

【问题标题】：Conditional show/hide for react radio button in .map.map 中反应单选按钮的条件显示/隐藏
【发布时间】：2018-11-20 18:59:21
【问题描述】：

我有一个单选按钮，当它为真/选中时，它会将该选项显示为选择。我遇到的问题是，在我的无线电组映射中，所有选项都被选为 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>

如有任何帮助，我们将不胜感激。

【问题讨论】：

您的checked 属性已与所有单选选项共享？

标签： javascript reactjs

【解决方案1】：

这是工作演示：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>
    );
  }
}

有几件事我们需要解决。

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

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

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

【讨论】：

【解决方案2】：

您的组件状态包含一个值，选中，可以设置为真或假。您将需要一个包含所选项目 id 的值。

试试这样的

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

【讨论】：

【解决方案3】：

你的 onClick 处理是错误的。我也解决了如下问题

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

【讨论】：