My input checkbox always returns true, when i mark it passsa true correctly, but when i unmark tb i get true. I would like the checkbox to return true when checked and false when unchecked, this way I would apply my logic in the handlesubmit function.
handleChange = e => {
const { name, value } = e.target;
console.log(name, value);
switch (name) {
case 'period': this.json.schedule = 'period'; break;
}
<input
type="checkbox"
name="period"
defaultValue
onChange={this.handleChange}
/>
My input checkbox always returns true, when i mark it passsa true correctly, but when i unmark tb i get true. I would like the checkbox to return true when checked and false when unchecked, this way I would apply my logic in the handlesubmit function.
handleChange = e => {
const { name, value } = e.target;
console.log(name, value);
switch (name) {
case 'period': this.json.schedule = 'period'; break;
}
<input
type="checkbox"
name="period"
defaultValue
onChange={this.handleChange}
/>
- I added the function on change – Janio Carvalho Commented Apr 16, 2019 at 20:00
-
Your
onChangecallback function isnt returning anything, where are you checking for true and false? – Ryan Wilson Commented Apr 16, 2019 at 20:05 - I think I understood the operation of the wrong ponent, believe that the simple fact of unmarking would return false, instead of true as I'm always receiving. – Janio Carvalho Commented Apr 16, 2019 at 20:07
-
add
checkedtoconst { name, value } = e.target– Neil Commented Apr 17, 2019 at 17:23
4 Answers
Reset to default 10Checkout the value of e.target.checked.
In your case, change this line: const { name, value } = e.target to include checked.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: true
}
}
handleChange = (e) => {
const { checked } = e.target
this.setState({
checked: checked
})
}
render() {
return (
<div>
<input type="checkbox"
onChange={e => this.handleChange(e)}
defaultChecked={this.state.checked}/>
{this.state.checked.toString()}
</div>
)
}
}
ReactDOM.render((<App/>), document.getElementById('testing'))<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="testing"></div>You can use useState.
import React, { useState } from 'react';
const App = () => {
const [Check, setCheck] = useState(false);
return (
<div>
<h1>{Check ? 'Checked' : 'Not checked'}</h1>
<input type="checkbox" onChange={(e) => setCheck(e.target.checked) }/>
</div>
);
};
export default App;
You first need to define what check is considered? If it is check it is true and when it is not checked it is false. Here is some code to get you started.
{ this.state.data.map(function(item, index) { return (
<input type="checkbox" checked={item.value} onChange={this.handleChange.bind(this, index)}/>
);
}.bind(this))
}
You aren't checking wether the box is checked or not, try:
handleChange = e => {
if (document.getElementByClassName("period").checked) {
// box is checked
} else {
// box is unchecked
}
}