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()]

xxxxxxxxxxxxxxxxxxxxxxxxxx

那么我该怎么做，以便只有单击的Switch是Toggle？我使用了react-switch Lib。

xxxxxxxxxxxxxxxxxxxxxxxxxx

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

Answer 2

您对所有checked组件使用Switch状态，这将导致您遇到的行为。

一种解决方案是将checked保存在您的meister对象中：

userUpdate(index, checked) {
    const { daten } = this.state;

    daten[index].checked = checked;

    this.setState({ daten });
}

/* inside your render */
this.state.daten.map((meister, index) => (
    /* ... */
    <Switch
        {/* ... */}
        checked={meister.checked}
        onChange={this.userUpdate.bind(this, index)}
    />
));

我使用.bind的第二个参数将index添加为userUpdate函数的第一个参数。

Answer 3

是的，确实切换了所有开关，因为所有开关的状态只有一个值：this.state.checked。

您需要为每个开关设置一个值，可以为此使用数组或对象：

带有数组

// constructor
this.state = {
  checked: [] // all switches
 };

// Update the checked state at the right index 
 userUpdate(checked, index) {
  const newChecked = this.state.checked
  newChecked[index] = checked
  this.setState({ checked: newChecked });
 }

// render
const ListeUser = this.state.daten.map((meister,index) => (
  // More code
 <Switch
        key={meister.SD_Emplid}
        width={151}
        onChange={(checked) => this.userUpdate(checked, index)} // We need to know which index is clicked
        checked={this.state.checked[index]}
        offColor="#A5C9D7"
        onColor="#00556A"
      />
)

带有对象：

// constructor
this.state = {
  checked: {} // all switches, keys will be the daten ids
 };

// Update the checked state 
 userUpdate(checked, id) {
  const newChecked = this.state.checked
  newChecked[id] = checked
  this.setState({ checked: newChecked });
 }

// render
const ListeUser = this.state.daten.map(meister => (
  // More code
 <Switch
        key={meister.SD_Emplid}
        width={151}
        onChange={(checked) => this.userUpdate(checked, meister.SD_Emplid)}
        checked={this.state.checked[meister.SD_Emplid]}
        offColor="#A5C9D7"
        onColor="#00556A"
      />
)

两个解决方案非常相似。

仅检查单击的开关，不起作用

3 个答案: