javascript - React js Material UI Switch组件在循环中

Question

我正在尝试制作考勤系统，并且正在使用 React Material UI 中的开关组件(引用: https://material-ui.com/api/switch/ )。

如何在循环中循环开关组件，以便每个开关按钮切换就像每个表行一样？下面是我的代码块。有帮助吗？目前，当我切换一个开关时，循环内的所有开关都会自动切换。

constructor(props) {
    super(props);
    this.state = {
        checkedB: false,
    }
    this.handleClassChange = this.handleClassChange.bind(this);
}

handleChange = name => event => {
    this.setState({ [name]: event.target.checked });
};

 {

  this.state.students.map((post, i) => (
  <TableRow key={i} className="tblFont">
  <TableCell scope="row">
  {post.ROLLNO}
  </TableCell>
  <TableCell>
  {post.STNAME}
  </TableCell>
  <TableCell>
      <Switch key={this.state[i]}
         checked={this.state.i}
         onChange={this.handleChange('checkedB')}
         value="checkedB"
         color="primary"
      />
  </TableCell>
</TableRow>
    ))
}

Answer 1

循环数组并为每个 Switch 创建状态。例如 { switch-0: false, switch-1: false, ...}

setDynamicSwitchState = (list) => {

  if (!list) {
    return
  }

  const switchState = {};

  list.forEach((item, index) => {
    switchState['switch-' + index] = false;
  });

  this.setState({
    switchState: switchState
  })
}

在你的handleChange

handleChange = (index, event, checked) => {

  const list = Object.assign({}, this.state.switchState);

  list['switch-' + index] = checked;

  this.setState({
    switchState: list
  })
}

Working Demo