处理状态:数组中的多个Checkboxed。怎么做？

Question

我有一长串复选框(不是优化的)，我想让它们处于一个状态:数组(选中的那个)，我不确定如何处理它，希望帮助(当单击时也应该处理取消检查).

问题是我如何HandleCheckbox。

​

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

通过创建对象数组，可以添加任意数量的复选框。设想如下：

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. 创建这样的复选框组件.

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

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

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

当单击复选框.

1. 时更新函数中的状态.

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

集合在一起的App.js

• ：您的文件应该与this类似

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 >
    )
  }

}

Answer 2

您应该能够在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 });
    }
}