ReactJS MultiSelect 컨트롤 event 내에서 state값이 일치하지 않습니다
페이지 정보
작성자 서울야수킹 작성일 2022-02-26 17:21 조회 2,536회 댓글 0건본문
관련링크
저희는 hook 방식을 사용하고 있습니다
MultiSelect 컨트롤의 onChange 이벤트 내에서 state value가 일치하지 않는 상황입니다
https://demo.grapecity.co.kr/wijmo/learn-wijmo/Input/MultiSelect/Overview/react 에서
코드를 테스트해 보아도 동일한 상황입니다. class 방식에서는 재현되지 않고요
위 페이지 내에서 아래 코드 그대로 붙여넣고 확인한 바 로그에 test state는 계속 false 상태를 유지하고 있습니다.
import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import "./app.css"; // import * as React from "react"; import { useState } from "react"; import * as ReactDOM from "react-dom"; import * as wjInput from "@grapecity/wijmo.react.input"; import { getData } from "./data"; // function App() { const [data, setData] = useState(getData()); const [showSelectAllCheckbox, setShowSelectAllCheckbox] = useState(false); const [showFilterInput, setShowFilterInput] = useState(false); const [test, setTest] = useState(false); const [checkedItems, setCheckedItems] = useState([]); const onCheckedItemsChanged = (sender) => { console.log("test", test); setCheckedItems(sender.checkedItems); }; const changeShowSelectAll = (event) => { setShowSelectAllCheckbox(event.target.checked); }; const changeShowFilterInput = (event) => { setShowFilterInput(event.target.checked); }; const changeTest = (event) => { setTest(event.target.checked); }; return ( <div className="container-fluid"> <div className="row"> <div className="col-xs-5"> <div className="form-group"> <wjInput.MultiSelect placeholder="Countries" headerFormat="{count:n0} countries" displayMemberPath="country" showSelectAllCheckbox={showSelectAllCheckbox} showFilterInput={showFilterInput} itemsSource={data} checkedItemsChanged={onCheckedItemsChanged} ></wjInput.MultiSelect> </div> <div className="form-group"> <label> Show "Select All" box <input id="selectAll" type="checkbox" checked={showSelectAllCheckbox} onChange={changeShowSelectAll} /> </label> </div> <div className="form-group"> <label> Show "Filter" input <input id="filter" type="checkbox" checked={showFilterInput} onChange={changeShowFilterInput} /> </label> </div> <div className="form-group"> <label> Test <input id="test" type="checkbox" checked={test} onChange={changeTest} /> </label> </div> </div> <div className="col-xs-7"> <p> <b>Test State: {`${test}`}</b> </p> <p> <b>Checked Items:</b> </p> <ul> {checkedItems.map((item, index) => { return <li key={index}>{item.country}</li>; })} </ul> </div> </div> </div> ); } ReactDOM.render(<App />, document.getElementById("app"));
댓글목록
등록된 댓글이 없습니다.