Question

我正在尝试制作考勤系统，并且正在使用React材质用户界面中的switch组件（参考：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

React js Material UI Switch组件在循环中

1 个答案: