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

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

使用 React 檢查主復(fù)選框時(shí)如何檢查子復(fù)選框？

使用 React 檢查主復(fù)選框時(shí)如何檢查子復(fù)選框？

瀟瀟雨雨 2023-09-28 16:36:37
我想在檢查主復(fù)選框時(shí)動(dòng)態(tài)檢查子復(fù)選框。我想使用 ReactJS 來實(shí)現(xiàn)這一點(diǎn)，這是我的代碼片段。ul {? ? list-style-type: none;}<div><input type="checkbox" id="fullbody" /><label htmlFor="fullbody">Download the points for the full body</label><ul>? ? <li><input type='checkbox' id="upperbody"/>Download only the upper body points</li>? ? <li><input type='checkbox' id="lowerbody" />Download only the lower body points</li>? ? <li><input type='checkbox' id="head" />Download only the head points</li>? ? <li><input type='checkbox' id="fullhands" />Download both hands points</li>? ? <li><input type='checkbox' id="lefthand" />Download left hand points</li>? ? <li><input type='checkbox' id="righthand" />Download right hand points</li></ul></div>所以我的問題是，如何在fullbody選中時(shí)動(dòng)態(tài)檢查子復(fù)選框？
查看完整描述

2 回答

?
拉風(fēng)的咖菲貓

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

因此，在這種情況下，您需要有一個(gè)復(fù)選框組和復(fù)選框組件。檢查下面的代碼片段。

為了您的目的，您可以安裝該包并使用，以便包大小會(huì)更小。


為了更好地理解，添加了一個(gè) div 以顯示單擊每個(gè)父復(fù)選框時(shí)的值。


應(yīng)用程序.js


import React from "react";

import { CheckboxGroup, AllCheckerCheckbox, Checkbox } from "./Checkbox";

import "./styles.css";


const App = () => {

? const [onChange, setOnChange] = React.useState({});


? return (

? ? <div>

? ? ? <CheckboxGroup onChange={setOnChange}>

? ? ? ? <label>

? ? ? ? ? <AllCheckerCheckbox />

? ? ? ? ? <span>Download the points for the full body</span>

? ? ? ? </label>

? ? ? ? <ul>

? ? ? ? ? <li>

? ? ? ? ? ? <label>

? ? ? ? ? ? ? <Checkbox name="upperbody" />

? ? ? ? ? ? ? <span>Download only the upper body points</span>

? ? ? ? ? ? </label>

? ? ? ? ? </li>

? ? ? ? ? <li>

? ? ? ? ? ? <label>

? ? ? ? ? ? ? <Checkbox name="lowerbody" />

? ? ? ? ? ? ? <span>Download only the lower body points</span>

? ? ? ? ? ? </label>

? ? ? ? ? </li>

? ? ? ? ? <li>

? ? ? ? ? ? <label>

? ? ? ? ? ? ? <Checkbox name="head" />

? ? ? ? ? ? ? <span>Download only the head points</span>

? ? ? ? ? ? </label>

? ? ? ? ? </li>

? ? ? ? ? <li>

? ? ? ? ? ? <label>

? ? ? ? ? ? ? <Checkbox name="fullhands" />

? ? ? ? ? ? ? <span>Download both hands points</span>

? ? ? ? ? ? </label>

? ? ? ? ? </li>

? ? ? ? ? <li>

? ? ? ? ? ? <label>

? ? ? ? ? ? ? <Checkbox name="lefthand" />

? ? ? ? ? ? ? <span>Download left hand points</span>

? ? ? ? ? ? </label>

? ? ? ? ? </li>

? ? ? ? ? <li>

? ? ? ? ? ? <label>

? ? ? ? ? ? ? <Checkbox name="righthand" />

? ? ? ? ? ? ? <span>Download right hand points</span>

? ? ? ? ? ? </label>

? ? ? ? ? </li>

? ? ? ? </ul>

? ? ? </CheckboxGroup>

? ? ? <div>

? ? ? ? <h1>Values</h1>

? ? ? ? <pre>{JSON.stringify(onChange, null, 2)}</pre>

? ? ? </div>

? ? </div>

? );

};


export default App;

工作壓縮沙箱


查看完整回答
反對(duì) 回復(fù) 2023-09-28
?
弒天下

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

嘗試使用此節(jié)點(diǎn)包來檢查（父級(jí)->子級(jí)）復(fù)選框和分層復(fù)選框。

npm install react-checkbox-tree --save


查看完整回答
反對(duì) 回復(fù) 2023-09-28
  • 2 回答
  • 0 關(guān)注
  • 126 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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