Question

我有一个单选按钮，当该按钮为true /选中时，将其显示为select。我的问题是在我的无线电组映射中所有选项都选择为true。这是一个codesandbox示例-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>

任何帮助在这里都将不胜感激。

Answer 1

您的组件状态包含一个已选中的单个值，可以将其设置为true或false。您将需要类似包含所选项目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>

Answer 2

这是有效的演示：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属性，也不需要管理检查的状态，只需要管理{{1}的value属性}和RadioGroup组件就足够了，只要它们匹配，就会知道选择了哪个选项。

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

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

Answer 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>

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

3 个答案: