第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

處理選擇所有復(fù)選框 - ReactJS

處理選擇所有復(fù)選框 - ReactJS

慕的地6264312 2022-01-07 20:46:58
我正在嘗試在我的 chechbox 上分配一個(gè)功能，選擇所有按鈕以在單擊按鈕時(shí)翻轉(zhuǎn)狀態(tài)，但我做錯(cuò)了什么。有人可以幫助我嗎？我的狀態(tài)：   constructor(props) {        super(props);        this.state = {           allCheckboxes: false        }; handleAllCheckboxes = (e) => {    const allCheckboxesChecked = e.target.checked    let checkboxes = document.getElementsByName('checkbox')    this.setState({        allCheckboxes: allCheckboxesChecked    })    console.log(allCheckboxesChecked)我的單個(gè)復(fù)選框：      <Checkbox            checked={this.handleAllCheckboxes ? true : false}            name='checkbox'            color='default'            value={JSON.stringify({ documentId: rowData.documentId, documentNumber: rowData.documentNumber })}            onClick={this.handleCheckboxClick}                                    />我的全選復(fù)選框：      <Checkbox           onChange={this.handleAllCheckboxes}           indeterminate           />Select All問(wèn)題是，無(wú)論我做什么，狀態(tài)都保持不變。它不會(huì)翻轉(zhuǎn)為 true 或 false 。
查看完整描述

3 回答

?
大話(huà)西游666

TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超14個(gè)贊

您的 Checkbox 處理程序應(yīng)該位于構(gòu)造函數(shù)之外。


如下所示：


constructor(props) {

        super(props);

        this.state = {

           allCheckboxes: true

        };

}





handleAllCheckboxes = (e) => {

    const allCheckboxesChecked = e.target.checked

    let checkboxes = document.getElementsByName('checkbox')

    this.setState({


        allCheckboxes: allCheckboxesChecked

    })

    console.log(allCheckboxesChecked)


}

你寫(xiě)了checked={this.handleAllCheckboxes ？true : false}看起來(lái)是錯(cuò)誤的。因?yàn)?**this.handleAllCheckboxes 已經(jīng)定義，因此它將始終返回 true。（因?yàn)楹瘮?shù)始終可用。）**。其次，handleAllCheckboxes 也沒(méi)有返回任何真/假。


查看完整回答
反對(duì) 回復(fù) 2022-01-07
?
慕的地10843

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超8個(gè)贊

有一個(gè)包grouped-checkboxes可以解決這個(gè)問(wèn)題。


您可以簡(jiǎn)單地將復(fù)選框包裝在 CheckboxGroup 中并添加 AllChecker。


import React from 'react';

import {

  CheckboxGroup,

  AllCheckerCheckbox,

  Checkbox

} from "@createnl/grouped-checkboxes";


const App = (props) => {

  const { products } = props


  return (

    <CheckboxGroup onChange={console.log}>

      <label>

        <AllCheckerCheckbox />

        Select all

      </label>

      {options.map(option => (

        <label>

          <Checkbox id={option.id} />

          {option.label}

        </label>

      ))}

    </CheckboxGroup>

  )

}

更多示例參見(jiàn)https://codesandbox.io/s/grouped-checkboxes-v5sww


查看完整回答
反對(duì) 回復(fù) 2022-01-07
?
開(kāi)心每一天1111

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊

您需要保持復(fù)選框狀態(tài)，單擊全選時(shí)將其狀態(tài)更改為 true，反之亦然。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>

<div id="root"></div>



<script type="text/babel">


class App extends React.Component {

  constructor() {

    super();

    this.state = {

      checkBoxes: {

        vehicle1: false,

        vehicle2: false,

        vehicle3: false,

      }

    };

  }


  handleCheckBoxes = (checkBox, checkAll = false) => {


    if (checkAll) {


      const checkBoxes = { ...this.state.checkBoxes };


      Object.keys(checkBoxes).forEach((key) => {

        checkBoxes[key] = checkBox.target.checked;

      });


      this.setState({

        checkBoxes: checkBoxes

      })


      return;

    }


    const { checked, name } = checkBox.target;


    this.setState(

      prevState => {

        return {

          checkBoxes: { ...prevState.checkBoxes, [name]: checked }

        };

      },

      () => console.log(this.state)

    );


    // console.log(checkBox.target.checked);

  };


  render() {

    return (

      <div>

        <label>

          <input

            type="checkbox"

            onChange={e => this.handleCheckBoxes(e, true)}

            name="vehicle1"

            value="Bike"

          />

          Select All

        </label>

        <br />

        <input

          type="checkbox"

          onChange={this.handleCheckBoxes}

          name="vehicle1"

          value="Bike"

          checked={this.state.checkBoxes["vehicle1"]}

        />

        <input

          type="checkbox"

          onChange={this.handleCheckBoxes}

          name="vehicle2"

          value="Car"

          checked={this.state.checkBoxes["vehicle2"]}

        />

        <input

          type="checkbox"

          onChange={this.handleCheckBoxes}

          name="vehicle3"

          value="Boat"

          checked={this.state.checkBoxes["vehicle3"]}

        />

      </div>

    );

  }

}


ReactDOM.render(

    <App />,

    document.getElementById('root')

);

</script>


查看完整回答
反對(duì) 回復(fù) 2022-01-07
  • 3 回答
  • 0 關(guān)注
  • 202 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)