Use React to get the selected value of a checkbox
P粉590929392
2023-09-02 22:36:49
<p>I'm trying to retrieve the checked value of a checkbox and save it into an array.
I tried: </p>
<pre class="brush:php;toolbar:false;">arr.push(setNewItem(checked))
arr.push(e.target.value.checked)
arr.push(items.checked)</pre>
<p>But these return values of the wrong type or undefined. </p>
<pre class="brush:php;toolbar:false;">const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) => {
if (e.target.checked) {
var arr = [...checkedItems];
//arr.push(setNewItem(e.target.value.checked));
setCheckedItems(arr);
console.log(arr);
} else {
checkedItems = "";
}
setIsChecked((current) => !current);
};</pre>
<pre class="brush:php;toolbar:false;">return (
<div className="App">
<StyleForm>
<StyleInput
type="text"
placeholder="Add"
value={newItem}
onChange={(e) => setNewItem(e.target.value)}
onKeyPress={handleOnKeyPress}
/>
<ButtonAddStyle onClick={() => addItem()}>Add</ButtonAddStyle>
<StyleUl>
{items.map((item) => {
return (
<StyleLi key={item.id}>
<StyleCheckBox
type="checkbox"
value={isChecked}
onChange={handleChange}
/>
{item.value}
{""}
<ButtonDelStyle onClick={() => deleteItem(item.id)}>
X
</ButtonDelStyle>
</StyleLi>
);
})}
</StyleUl>
</StyleForm>
</div>
);</pre>
This may solve your problem.
is the correct way to get rid of:
You cannot update status this way, and when you try to uncheck an input, an error will appear:
Now let's see what you want to do, every time an input is checked, you store
e.target.checked
, socheckedItems
will look like this:Why do you need this? A better approach is to store the id of the selected item:
Then in jsx:
Now look at this:
You are mapping via
items
, creating multiple checkboxes, but they all share the same value. The value attribute of the checkbox is not what you think, please learn more in here. So you can usevalue={item.id}
to set a unique value for each input, and get rid of the useState hook ofisChecked
, which you don't really need.