javascript - Count checkboxes click in grandchild component -
main app:
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 .allthesteps return ( ce('div', { classname:'allthesteps' }, ce(pagination, { steps }), object.values(steps).map((step, i) => ce(steps, { step, key: v4(), i, checkboxclick }), ) ) ); }; }; child component:
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 })) ) ); grandchild component:
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 clausehound research team: ', }) : null, ) ); the app step step instruction/tutorial , when user done step, tick checkbox , percentage completion displayed. want calculate percentage of checkboxes have been clicked.
currently trying in checkboxclick function in parent component. correct approach? type needs boolean know whether checkbox checked or unchecked.
Comments
Post a Comment