计数复选框单击孙子组件

Question

主要应用：

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      totalCheckBoxes: 0,
      checkboxesClicked: 0,
      percentage: 0,
    };

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

  checkboxClick(type) {
    (type) ? this.setState({ checkboxesClicked: checkboxesClicked++ }) :
      (type > 0) ? this.setState({ checkboxesClicked: checkboxesClicked-- }) : this.setState({ checkboxesClicked: 0 });
  }

  render() {
    // grab steps
    const { steps } = this.props;
    const { totalCheckBoxes } = this.state;
    const { checkboxClick } = this;

    // add rendered steps to .allTheSteps
    return (
      ce('div', { className:'allTheSteps' },
        ce(pagination, { steps }),
        Object.values(steps).map((step, i) =>
          ce(Steps, { step, key: v4(), i, checkboxClick }),
        )
      )
    );
  };

};

子组件：

const Steps = ({ step, i, checkboxClick }) =>
  ce( "div", {
      className: `mainBoxes clearfix playbook_step_${i}`,
      key: v4(),
    },
      ce('span', {
        className: 'steps'
      }, step.id + 1 + ' - '),
      ce("strong", {
        className: "titleText",
        key: v4(),
      }, step.name),
      ( step.summary.length ) ? ce('div', { className: 'step__summary' }, step.summary) : null,
      ce( "div", {
        className: "stepArticle__content",
        key: v4(),
      },
        step.articles.map(({ name, url }, j) => ce(Articles, { name, url, key: v4(), j, checkboxClick }))
      )
    );

孙子组件：

class Articles extends Component {

  constructor(props) {
    super(props);
    this.state = {
      notes: false,
      questions: false,
    };
    this.addNotes = this.addNotes.bind(this);
    this.askQuestions = this.askQuestions.bind(this);
  }

  addNotes() {
    this.setState({ notes: !this.state.notes });
  }

  askQuestions() {
    this.setState({ questions: !this.state.questions });
  }

  render(){
    const { name, url, checkboxClick } = this.props;
    const { notes, questions } = this.state;
    const { addNotes, askQuestions } = this;

    return ce('div', null, Article( { name, url, notes, questions, addNotes, askQuestions, checkboxClick } ));

  }

}

const Article = ({ name, url, notes, questions, addNotes, askQuestions, checkboxClick }) => (
  ce('div', { className: 'stepArticle step__'},
    ce('div', {className: 'clearfix'},
        ce('div', {className: 'articleTitle'},
          ce('input', {
            type: 'checkbox',
            name: 'done',
            onClick: checkboxClick.bind(null, this),
            className: 'checkBoxes'}
            ),
          ce('a', {
            className: 'checkLink',
            target: '_blank',
            href: url
          }, name),
        ),
        ce('div', {className: 'articleActions'},
          ce('input', {
            type: 'button',
            value: 'Make Notes',
            className: 'addNotes',
            onClick: addNotes,
          }),
          ce('input', {
            type: 'button',
            value: 'Ask Clausehound',
            className: 'askQuestions',
            onClick: askQuestions,
          }),
        )
      ),
    (notes) ? ce('textarea', {
      className: 'text_areas notes notes__',
      placeholder: 'My Notes: '
    }) : null,
    (questions) ? ce('textarea', {
      className: 'text_areas questions questions__',
      placeholder: 'Questions for Clausehound Research Team: ',
    }) : null,
  )
);

该应用程序是一步一步的指导/教程，当用户完成一个步骤时，他们勾选复选框并显示完成百分比。我想计算已点击的复选框的百分比。

目前我正在尝试在父组件的checkboxClick函数中执行此操作。这是正确的方法吗？ type需要是布尔值，以便我们知道复选框是选中还是取消选中。

Codesandbox link.