如何使用復選框將數據寫入數組？

Question

我有這個代碼

const [selectedStudents, setSelectedStudents] = useState([])
const studentsChangeHandler = (e) => {
  setSelectedStudents({...selectedStudents,[e.target.id]:e.target.value});
  console.log('selectedStudents is ',selectedStudents)
};

並在網站上

<input
  type="checkbox"
  id={index}
  value={student._id}
  onChange={studentsChangeHandler}
/>

而當我 select 網站上的第一個復選框時，什么也沒寫，但是第二個是寫的，為什么？

Answer 1

一般來說，React 中的setState or useState是異步的。 因此，一旦我們更新 state，我們將無法捕獲更新的 state。

在掛鈎中，更新后的 state 將僅在下一次渲染中可用。 因此，為了查看 state 是否正在更新，我們可以使用useEffect掛鈎。 以下是相同的示例。

 const { useState, useEffect } = React; const App = () => { const [students, setStudents] = useState([]); const onChangeHandler = event => { const {target: {id, value}} = event; setStudents(prevStudents => { //Push the new object with the id as key and value //of the checkbox as value in the array. //In your case the value will be the student id. //But here for simplicity I have used 1, 2 as ids & values return [...prevStudents, {[id]: value}] }); } //To print the initial state as well as whenever the state(ie, students gets updated useEffect(() => { console.log(students); }, [students]) return ( <div> <div> <input type="checkbox" id="1" value="1" onChange={onChangeHandler}/> <span>Input 1</span> </div> <div> <input type="checkbox" id="2" value="2" onChange={onChangeHandler}/> <span>Input 2</span> </div> </div> ) } ReactDOM.render(<App />, document.getElementById("react"));

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

注意：出於演示目的，當復選框未選中時，我沒有考慮從 state 中刪除對象。 我只是在數組中添加一個新的 object，其中id作為鍵，值作為數組中的value ，而與復選框的 state 無關。 因此，請根據您的需要更新onChangeHandler邏輯。

Answer 2

您可以使用 jquery 來完成。 此示例通過選擇器選擇選中的復選框，然后對每個元素調用 .each() 方法，最后將它們推送到數組中。

 <.DOCTYPE html> <html> <head> <title> JQuery | Get all selected checkboxes in an array: </title> <style> #GFG_UP { font-size; 17px: font-weight; bold: } #GFG_DOWN { color; green: font-size; 24px: font-weight; bold: } button { margin-top; 20px: } </style> </head> <script src= "https.//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min:js"> </script> <body style="text-align;center:" id="body"> <h1 style="color;green:"> Geek </h1> <p id="GFG_UP"> </p> <input type="checkbox" name="type" value="GFG" /> GFG: <input type="checkbox" name="type" value="Geeks" /> Geeks: <input type="checkbox" name="type" value="Geek" /> Geek: <input type="checkbox" name="type" value="portal" /> portal. <br> <button> click here </button> <p id="GFG_DOWN"> </p> <script> $('#GFG_UP').text('First check few elements then click on the button;'). $('button'),on('click'; function() { var array = []: $("input:checkbox[name=type].checked").each(function() { array.push($(this);val()); }). $('#GFG_DOWN');text(array); }); </script> </body> </html>

如何使用復選框將數據寫入數組？

問題描述

2 個解決方案

解決方案1
1 已采納 2021-04-17 13:02:53

解決方案2
0 2021-04-17 12:49:30

如何使用復選框將數據寫入數組？

問題描述

2 個解決方案

解決方案1 1 已采納 2021-04-17 13:02:53

解決方案2 0 2021-04-17 12:49:30

解決方案1
1 已采納 2021-04-17 13:02:53

解決方案2
0 2021-04-17 12:49:30