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

Question

I have a radio button that when true/checked it shows that option as select. The problem I have is that all options are selected as true within my radio group mapping. Here is an codesandbox example - 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>

Any help would be appreciated here.

Answer 1

Your component state contains a single value, checked, which can be set to true or false. You will need something like a value containing the id of the selected item.

Try something like this

<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

This is the working demo: https://codesandbox.io/s/l261qp002m

---

Final code

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>
    );
  }
}

---

There are several things that we need to fix.

Firstly, we don't need the checked attribute on the FormControlLabel component and also don't need to manage the state checked, just the value attribute of RadioGroup and FormControlLabel components are enough, as long as they match, it will know which option is selected.

Secondly, since we're passing the String(this.state.value) , hence, our event.target.value become a string rather than an integer . Therefore, we can't use the strict comparison === , we use the == instead.

Finally, we write the event handler for the onClick event on the FormControlLabel component.

Answer 3

You'r onClick handling is wrong. I have fixed the problem as below also

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