获取父容器中选中复选框的计数答案

【问题标题】：Get count of count checked checkboxes in parent container获取父容器中选中复选框的计数
【发布时间】：2018-06-03 13:18:02
【问题描述】：

我有一个父组件。它遍历一个数组，并为数组中的每个项目创建一个新的子组件。这些子组件是内部带有复选框和标签的 div。我希望在父控件中有一个显示选中复选框数量的 div。

什么是最好和最简单的方法？

【问题讨论】：

它可以使用一个简单的状态来实现，例如count 并为每个输入设置 onChange 处理程序，onChange 你将这个count 增加1

标签： reactjs

【解决方案1】：

由于您希望在父组件上显示计数，因此您需要从该父组件跟踪它。所以我实现了 count 函数，并将它作为道具传递给你的子组件。我们将使用父组件的计数状态来跟踪所有子组件。请参阅下面 sn-p 中的 App 组件。

至于子组件，你只需要一个简单的复选框处理程序来控制复选框是否被选中，当你这样做时，调用作为 props 传入的 count 函数。查看 sn -p 中的 Checkbox 组件

class Checkbox extends React.Component {
  constructor(props) {
    super(props)
    this.state ={
      checked: false
    }
  }
  handleCheck () {
    let checked = !this.state.checked
    if (checked) {
      this.props.count(true)
    } else {
      this.props.count(false)
    }
    this.setState({checked})
  }
  render () {
    return (
      <div>
        <label>
          {this.props.name}
          <input type='checkbox' checked={this.state.checked} onChange={() => this.handleCheck()}/>
        </label>
       </div>
    )
  }
}

class App extends React.Component{
  constructor (props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  
  count (checked) {
    let { count } = this.state
    if (checked) {
    	count ++
		} else {
    	count --
    }

    console.log(count)
    this.setState({count})
  }
  
  render(){
    const arr = ['Checkbox1', 'Checkbox2', 'Checkbox3']
    // Note: make sure to use bind on the count function since we are
    // using the state from the parent component
    return (
     <div>
        <form >
         {arr.map(a => <Checkbox name={a} count={this.count.bind(this)}/>)}
        </form>
        {this.state.count}
     </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

【讨论】：

【解决方案2】：

const checkboxItems = ["beep", "foo", "bop", "bar"];

class App extends React.Component {
  constructor(props) {
    super(props);
    const { checkboxItems } = this.props;
    const checkedState = checkboxItems.reduce((acc, label) => {
      acc[label] = false;
      return acc;
    }, {});
    this.state = {
      checkedState: checkedState
    };
  }

  onChange = (e, label) => {
    this.setState({
      checkedState: {
        ...this.state.checkedState,
        [label]: e.target.checked
      }
    });
  };

  render() {
    const { checkedState } = this.state;
    const { checkboxItems } = this.props;
    const numChecked = Object.keys(checkedState).reduce((acc, key) => {
      if (checkedState[key]) acc++
      return acc
    }, 0)
    return (
      <div>
        {checkboxItems.map((label, index) => {
          return (
            <label key={index}>
              <input
                type="checkbox"
                onChange={e => this.onChange(e, label)}
                checked={checkedState[label]}
              />
              {label}
            </label>
          );
        })}
        <div>
        Number of checked inputs: {numChecked}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App checkboxItems={checkboxItems} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：