reactjs - 只检查点击的开关，不工作

Question

我只想检查点击的开关，但如果我点击一个开关，所有的开关都是切换的。

 class LoadMeister extends Component {
  constructor(props) {
  super(props);

this.state = {
  daten: [],
  isLoading: true,
  checked: false
 };
 this.userUpdate = this.userUpdate.bind(this);
 }



 userUpdate(checked) {
  this.setState({ checked });
 }


 [...]



  render() {
  const ListeUser = this.state.daten.map(meister => (
  <Col md={2} xs={3} sm={3} className="karten">
    <h3
      title={meister.SD_Vorname}
      style={{
        fontWeight: "bold",
        textOverflow: "ellipsis",
        overflow: "hidden",
        whiteSpace: "nowrap"
      }}
    >
      {meister.SD_Vorname} {meister.SD_Nachname}
    </h3>
    <hr />
    <p />
    <FaBeer size="2em" />
    <FaBeer size="2em" style={{ float: "right" }} />
    <div style={{ marginTop: "10px" }}>
      <Switch
        key={meister.SD_Emplid}
        width={151}
        onChange={this.userUpdate}
        checked={this.state.checked}
        offColor="#A5C9D7"
        onColor="#00556A"
      />
    </div>
  </Col>
   ));

 [Return()]

xxxxxxxxxxxxxxxxxxxxxxxxxxx

那么我必须做什么，以便只有单击的 Switch 是 Toggle ？我使用反应开关库。

xxxxxxxxxxxxxxxxxxxxxxxxxxx

标签： reactjsreact-native

Answer 1

尝试类似：

userUpdate(checkedId) {
  this.setState({ checkedId:id });
 }

...rest of your code

<Switch
   key={meister.SD_Emplid}
   width={151}
   onChange={()=>this.userUpdate(meister.SD_Emplid)}
   checked={this.state.checkedId===meister.SD_Emplid}
   offColor="#A5C9D7"
   onColor="#00556A"
 />