javascript 确定react(useState)中选中复选框的方法

yruzcnhs 于 2023-02-28 发布在 Java

关注(0)|答案(4)|浏览(162)

这是我第一次开发react应用程序，我尝试在表格的每一行实现复选框，并检查哪些行被选中。
我使用useState钩子来生成checked和onChange事件，但是当我选中然后取消选中复选框时，值似乎没有刷新。
我想问一下如何添加一个逻辑来删除钩子上未勾选的值。
T1复选框A-选中复选框B-选中选中Map-A、B
T2复选框B-未选中CheckedMap-A，B//未选中的复选框B也存储在CheckedMap中
谢谢你的帮助。

export default function({ infinite }) {
  const [checkedMap, setCheckedMap] = useState(new Map());
}

const handleCheckedChange = transaction_seq => {
    let modifiedMap = checkedMap;
    modifiedMap.set(transaction_seq, !checkedMap.get(transaction_seq));
    setCheckedMap(modifiedMap);
  };

const columns = [
    {
      Header: "Transaction(s)",
      className: "left",
      columns: [
        {
          id: "checkbox",
          accessor: "checkbox",
          Cell: ({ row }) => {
            return (
              <input
                type="checkbox"
                className="checkbox"
                checked={checkedMap.get(row.original.transaction_seq)}
                onChange={() =>
                  handleCheckedChange(row.original.transaction_seq)
                }

JavaScript

来源：https://stackoverflow.com/questions/56356900/way-to-determine-checkbox-checked-in-react-usestate

4条答案

按热度按时间

xzv2uavs1#

这是如何使用react useState钩子控制复选框的方法。

const { useState } = React; // --> for inline use
// import React, { useState } from 'react';  // --> for real project

const App = () => {
  const [checked, setChecked] = useState(false)
  const handleClick = () => setChecked(!checked)
  
  return <input onClick={handleClick} checked={checked} type="checkbox" />
};

ReactDOM.render(<App />, document.getElementById('root'))

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

赞(0）回复(0）举报 2023-02-28

bxfogqkk2#

对函数使用onClick可能会出错。请改用onChange：

import { useState} from "react";

    export default function App() {
      const [checked, setChecked] = useState<boolean>(true);
      
      return (
        <input name="checked" type="checkbox" checked={checked} 
          onChange={e => setChecked(!checked)} />
      )
    }

赞(0）回复(0）举报 2023-02-28

oug3syen3#

您可以在Map中检查校验状态，然后决定是设置值还是删除值

const handleCheckedChange = transaction_seq => {
    let modifiedMap = checkedMap;
    if(checkedMap.get(transaction_seq)) {
        modifiedMap.delete(transaction_seq)
    } else {
        modifiedMap.set(transaction_seq, true);
    }
    setCheckedMap(modifiedMap);
  };

赞(0）回复(0）举报 2023-02-28

alen0pnh4#

当你使用onChange时你得到一个事件对象。使用那个事件来检查复选框是否被选中

//here, you got access to event object
onChange={(e) =>
  handleCheckedChange(e, row.original.transaction_seq)
}

然后，在函数中使用该事件检查状态

const handleCheckedChange = (e, transaction_seq) => {
  if(e.target.checked == true){
    //do something
  }
  if(e.target.checked != true){
    //do something else
  }
};

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 确定react(useState)中选中复选框的方法

4条答案

相关问题

热门标签

最新问答