处理 State:Array 中的多个复选框。如何？

Question

我有一长串复选框（没有那么优化），我想让它们处于一个状态：数组（选中的那个），我不确定如何处理它希望得到帮助（也应该处理取消选中点击时）...

问题是我如何处理复选框。

this.state = {
  checkboxed: [],
}

<div className=' row float-center d-flex justify-content-center '>
<label className='m-3'>
    <input name='1' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    1
</label>
<label className=' m-3'>
    <input name='1.5' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    1.5
</label>
<label className=' m-3'>
    <input name='2' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    2
</label>
<label className=' m-3'>
    <input name='2.5' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    2.5
</label>
<label className=' m-3'>
    <input name='3' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    3
</label>
<label className=' m-3'>
    <input name='3.5' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    3.5
</label>
</div>

Answer 1

您应该能够在 this.handleInputChange 函数中使用适当的值设置状态。

类似这样的：

handleInputChange = (event) => {
    const self = this;
    if (event.currentTarget.checked) {
        const stateValues = self.state.checkboxed;
        stateValues.push(event.currentTarget.name;
        self.setState({ checkboxed: stateValues });
    }
}

Answer 2

您可以通过创建对象数组来添加任意数量的复选框。 思路如下：

1. 创建一个复选框对象数组：

const checkboxes = [
  {
    name: '1',
    key: '1',
    label: '1',
  },
  {
    name: '1.5',
    key: '1.5',
    label: '1.5',
  },
  {
    name: '2',
    key: '2',
    label: '2',
  },
  {
    name: '2.5',
    key: '2.5',
    label: '2.5',
  },
  {
    name: '3',
    key: '3',
    label: '3',
  },
  {
    name: '3.5',
    key: '3.5',
    label: '3.5',
  }
];

1. 像这样创建一个 Checkbox 组件。

const Checkbox = ({ type = 'checkbox', name, checked = false, onChange }) => (
  <input type={type} name={name} checked={checked} onChange={onChange} />
);

1. 将地图声明为状态，以便您可以获取或更新特定复选框。

this.state = {
    checkedItems: new Map(),
}

4. 点击复选框时更新函数中的状态。

handleChange(e) {
    const item = e.target.name;
    const isChecked = e.target.checked;
    this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
}

5. 一起来：你的App.js文件应该是这样的

import React from 'react';

const Checkbox = ({ type = 'checkbox', name, checked = false, onChange }) => (
  <input type={type} name={name} checked={checked} onChange={onChange} />
);

const checkboxes = [
  {
    name: '1',
    key: '1',
    label: '1',
  },
  {
    name: '1.5',
    key: '1.5',
    label: '1.5',
  },
  {
    name: '2',
    key: '2',
    label: '2',
  },
  {
    name: '2.5',
    key: '2.5',
    label: '2.5',
  },
  {
    name: '3',
    key: '3',
    label: '3',
  },
  {
    name: '3.5',
    key: '3.5',
    label: '3.5',
  }
];

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      checkedItems: new Map(),
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const item = e.target.name;
    const isChecked = e.target.checked;
    console.log(item);
    console.log(isChecked);
    this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
  }

  render() {
    return (
      <div className='row float-center d-flex justify-content-center'>
        {
          checkboxes.map(item => (
            <label key={item.key} className='m-3'>
              <Checkbox name={item.name} checked={this.state.checkedItems.get(item.name)} onChange={this.handleChange} />
              {item.name}
            </label>
          ))
        }
      </div >
    )
  }

}