Как отобразить количество отмеченных флажков в реакции? Сама функция работает, но не может отображать счетчик в приложении

Question

Число вне функции handleCheckCount равно 0, так как можно передать фактическое количество отмеченных в теге в теге рендеринга? Я попытался передать состояние как Общее количество выбранных флажков: {this.state.count}, но это просто возвращает 0. Если я console.log (count) внутри функции handleCheckCount, он отображает количество отмеченных флажков в консоли, но снаружи возвращается 0.

  state={
    checked: false,
    count: 0
  }
  handleCheckCount=()=> {
    let input = document.getElementsByTagName('input');
    let count= this.state.count
    for (var i = 0; i < input.length; i++) {
      if (input[i].type === "checkbox" && input[i].checked === true) {
        count++

      }
    }
    console.log(count)
  }

  render(){
    return(
      <div>
        <table>
        <thead>
        <tr>
          <th className="select_all">
            <input type="checkbox" name="check" id="parent"
              onClick={this.onSelectAll.bind(this)} onChange={this.handleCheckCount}/>
          </th>
          <th>Score</th>
          <th>FirstName</th>
          <th>LastName</th>

        </tr>
        </thead>
      </table>

        <h2>Total Number of Checkbox Selected: </h2>

      </div>
    )
  }

Answer 1

Вот рабочий пример:

class App extends React.Component {

   state={
    checked: false,
    count: 0
  }

  handleCheckCount=(e)=> {
    // let input = document.getElementsByTagName('input');
    const { checked, type } = e.target;
    // let count= this.state.count
    // for (var i = 0; i < input.length; i++) {
      if (type === "checkbox" && checked === true) {
        this.setState(state => state.count++, this.logCount)
      } else {
        this.setState(state => state.count--, this.logCount)
      }
    // }
  }

  logCount() {
    console.log(this.state.count);
  }

  render(){
    return(
      <div>
        <table>
        <thead>
        <tr>
          <th className="select_all">
            <input type="checkbox" name="check" id="parent" onChange={e => this.handleCheckCount(e)}/>
          </th>
          <th>Score</th>
          <th>FirstName</th>
          <th>LastName</th>

        </tr>
        </thead>
      </table>

        <h2>Total Number of Checkbox Selected: {this.state.count}</h2>

      </div>
    )
  }

}

Ваша проблема заключалась в том, что вы не обновляли свое состояние, только переменную области действия count внутри функции (той же, что вы также регистрировали). Я также добавил блок else для уменьшения количества и удалил слушатель onClick.

Обновление: Нет необходимости использовать getElementsbyTagName и для l oop , Вы можете использовать событие для получения цели и ее свойств.

См. На Codepen

Надеюсь, это поможет.