I need to set the defaultChecked on page load which can later be changed by the user
<input
ref={(element) => (this['input' + item.key] = element)}
name={item.key}
placeholder='Config value'
defaultChecked={item.value === true}
value='true'
type='radio'
onChange={(event) => this.validateCValue(event.target.value, item)}
/>
<label> True</label>
Radio inputs can only be checked but not unchecked, if you set it to true, the user will not be able to uncheck it, maybe you meant to use a checkbox?
const [checked, setChecked] = useState(true);
const handleChange = () => {
setChecked(checked => !checked);
};
return (
<div className="App">
<input
placeholder="Config value"
defaultChecked={checked}
type="checkbox"
onChange={handleChange}
/>
<label>{checked ? "checked" : "not checked"}</label>
</div>
);
this works for me use "checked" tp set radio button default value
<div onChange={this.sethandleValueChange.bind(this)} className={` ${(this.state.IsControlSet && this.state.RadioBtnVal=="" ? styles.control_border_red : "")}`}>
<input type="radio" value="Yes" name="RadioBtnVal" checked={this.state.RadioBtnVal=="Yes"} disabled={(this.state.FormName!="View") ? false : true}/> Yes<br/>
<input type="radio" value="No" name="RadioBtnVal" checked={this.state.RadioBtnVal==="No"} disabled={(this.state.FormName!="View") ? false : true}/> No
</div>
Related
now, I using radio button to render 2 components differently I use onClick with radio button to [isRepeat,setisRepeat] setState value
<input
required
id="singleClass"
name="classType"
type="radio"
className="inputContainer"
value={1}
OnClick={() => setisRepeat("oneTime")}
></input>
<label>ครั้งเดียว</label>
<input
required
id="repeatClass"
name="classType"
type="radio"
className="inputContainer"
value={2}
onClick={() => setisRepeat("repeat")}
></input>
and render component like this
{isRepeat === "oneTime" && (
<>...</>
)}
{isRepeat === "repeat" && (
<div>...</div>
)}
but when I using onClick() with radio button, It's make user to click "twice" to make radio button checked
(actually, setState work fine when click radio button but radio button didn't be checked. It should be checked and setState at the same time to make user not confuse)
ps. I already using document.getElementByName('classType').value === 1 or 2 to render different items, but didn't work
You should use onChange with input as:
onChange={() => setisRepeat("oneTime")}
instead of onClick
Demo
export default function App() {
const [isRepeat, setisRepeat] = useState(""); // You can also give the initial value
return (
<div>
<input
required
id="singleClass"
name="classType"
type="radio"
className="inputContainer"
value={1}
onChange={() => setisRepeat("oneTime")}
></input>
<label>ครั้งเดียว</label>
<input
required
id="repeatClass"
name="classType"
type="radio"
className="inputContainer"
value={2}
onChange={() => setisRepeat("repeat")}
></input>
<br />
{isRepeat === "oneTime" && <> One Time </>}
{isRepeat === "repeat" && <div> Repeat </div>}
</div>
);
}
You can use onChange instead of onClick handler and checked property along with it.
import { useState } from "react";
export default function App() {
const [isRepeat, setisRepeat] = useState("");
const onClickHandler = (type) => {
if (type === "singleClass") {
setisRepeat("singleClass");
} else {
setisRepeat("repeatClass");
}
};
return (
<div className="App">
<input
required
name="singleClass"
type="radio"
className="inputContainer"
value={1}
checked={isRepeat === "singleClass"}
onChange={() => {
onClickHandler("singleClass");
}}
></input>
<label>ครั้งเดียว</label>
<input
required
name="repeatClass"
type="radio"
className="inputContainer"
value={2}
checked={isRepeat === "repeatClass"}
onChange={() => {
onClickHandler("repeatClass");
}}
></input>
{isRepeat === "singleClass" && (
<>
<p>One time component Triggered </p>
</>
)}
{isRepeat === "repeatClass" && <div>Repeat component Triggered </div>}
</div>
);
}
Demo
In the first input you have a typo. You have OnClick but you want onClick
It works for me with one click like this
(I removed a few props to make it shorter)
import React from 'react';
import { useState } from 'react';
const Demo = () => {
const [isRepeat, setIsRepeat] = useState('');
return (
<>
<input type="radio" value={1} onClick={() => setIsRepeat('oneTime')}></input>
<label>ครั้งเดียว</label>
<input type="radio" value={2} onClick={() => setIsRepeat('repeat')}></input>
{isRepeat === 'oneTime' && <span>One Time</span>}
{isRepeat === 'repeat' && <span>repeat</span>}
</>
);
};
export default Demo;
I have two radio buttons and I want to add a background color to the active radio button.
I tried to add it via a condition but it seems to be not working. What am i doing wrong here?
I'm getting Cannot read property 'gender' of undefined error
import React from "react";
import "./App.css";
export default function App() {
const [gender, setGender] = React.useState();
return (
<div className="App">
<Radio
label="male"
value="male"
checked={gender}
setter={setGender}
style={{backgroundColor: this.state.gender == 'male' ? 'red': 'white'}}
/>
<Radio
label="female"
value="female"
checked={gender}
setter={setGender}
style={{backgroundColor: this.state.gender == 'female' ? 'red': 'white'}}
/>
</div>
);
}
const Radio = ({ label, value, checked, setter }) => {
return (
<div className="radio">
<label>
<input
type="radio"
checked={checked === value}
onChange={() => setter(value)}
/>
<span>{label}</span>
</label>
</div>
);
When using react hooks, you do not need to use this.state.gender...
Try this:
<div className="App">
<Radio
label="male"
value="male"
checked={gender}
setter={setGender}
style={{backgroundColor: gender === 'male' ? 'red': 'white'}}
/>
<Radio
label="female"
value="female"
checked={gender}
setter={setGender}
style={{backgroundColor: gender === 'female' ? 'red': 'white'}}
/>
</div>
Few changes required
1-Always provide initial value
const [gender, setGender] = React.useState('');
2- Since you are using hooks, don't need to use this.state
style={{backgroundColor: gender === 'male' ? 'red': 'white'}}
If you are trying to change background color on selection of radio button, Replace Radio component with below.
const Radio = ({ label, value, checked, setter, style }) => {
return (
<div className="radio" style={style}>
<label>
<input
type="radio"
checked={checked === value}
onChange={() => setter(value)}
/>
<span>{label}</span>
</label>
</div>
);
};
Live demo
I am new to reactjs. I have radio buttons that say UserA, UserB, UserC, and User D. I have multiple permission for UserA based on sub-selection of radio buttons(Like Admin, Editor, User). Similarly, for UserD I can have only one permission like SuperAdmin. Whenever I select UserD, it should set the permission to 'Super Admin' which is working. But If I select another radio button, User D is not unselecting.
I believe it is because I am using the name as 'permission' on both the input fields(User D and UserA Admin sub option) which is not resetting the values in the state.
Here is the codepen for your reference. Any help would be much appreciated.
Thank you
You must have all input[radio-button]'s structure similar. You must be updating the state based on a condition. This code worked for me based on the given requirement. I have made some minor changes to the input userD and setState method. I hope this resolves your problem.
export default function Form() {
const [state, setState] = React.useState({
user: '',
testRequest: false,
permission: ''
});
const [disableuserA, setdisableuserA] = React.useState(false);
const [value, setValue] = React.useState(0);
const [selected, setSelected] = React.useState('');
function handleChange(e) {
const value =
e.target.type === 'checkbox' ? e.target.checked : e.target.value;
setState({
...state,
[e.target.name]: value,
...(e.target.name == 'user' &&
e.target.value == 'userD' && { permission: 'superAdmin' })
});
setSelected(e.target.value);
}
return (
<div className="app">
<form onSubmit={handleFormSubmit}>
<div>
<div>
<input
type="checkbox"
name="testRequest"
value={value}
onClick={() => setdisableuserA(!disableuserA)}
checked={state.testRequest}
onChange={handleChange}
/>
Enable this to hide the User A option
</div>
<div className="heading">user</div> <br />
<input
disabled={disableuserA}
type="radio"
name="user"
value="userA"
checked={selected === 'userA' || selected === 'admin'}
onChange={handleChange}
/>
UserA
<input
type="radio"
name="user"
value="userB"
checked={state.user === 'userB'}
onChange={handleChange}
/>
UserB
<input
type="radio"
name="user"
value="userC"
checked={state.user === 'userC'}
onChange={handleChange}
/>
UserC
<input
type="radio"
name="user"
value="userD"
checked={state.user === 'userD'}
onChange={handleChange}
/>
UserD
<br /> <hr />
<div
aria-hidden={
selected !== 'userA' &&
selected !== 'admin' &&
selected !== 'editor' &&
selected !== 'publisher'
? true
: false
}
>
<input
type="radio"
name="permission"
value="admin"
checked={state.permission === 'admin'}
onChange={handleChange}
/>{' '}
Admin
<input
type="radio"
name="permission"
value="editor"
checked={state.permission === 'editor'}
onChange={handleChange}
/>{' '}
Editor
<input
type="radio"
name="permission"
value="publisher"
checked={state.permission === 'publisher'}
onChange={handleChange}
/>{' '}
Publisher
</div>
<br /> <br />
<button type="submit" className="btn-default btn">
Submit{' '}
</button>
</div>
</form>
<pre>{JSON.stringify(state, null, 3)}</pre>
</div>
);
}
Live Demo
I have two radio buttons, under each there are two number inputs. The goal is to clear the values that belong to deselected radio immediately on selecting the other radio.
I tried to resolve it by adding the ternary operator to defaultValue:
defaultValue={props.xxx ? props.yyy.toString() : ''}
But this works only when I refresh the page after selecting the radio, which isn't what I need. What is the way to clear the fields immediately when I select the other radio? I have read all similar questions here, but nothing helped in my situation.
The code is like this:
<Input
type="radio"
id="radio1"
label=""
name="radio"
onChange={() => onSomeChange(AbC, true)}
defaultChecked={props.aaa === true}
/>
<div className={cx({hidden: props.ooo})}>
{props.xxx === AbC && (
<div>
<Input
type="number"
id="min-number"
name="min-max1"
label=""
defaultValue={props.xxx ? props.yyy.toString() : ''}
onBlur={(e) => onOtherChange(true, inputValue(e.target.value))}
/>
<Input
type="number"
id="max-number"
name="min-max1"
label=""
defaultValue={props.xxx ? props.yyy.toString() : ''}
onBlur={(e) => onOtherChange(false, inputValue(e.target.value))}
/>
</div>
)}
<Input
type="radio"
id="radio2"
label=""
name="radio"
onChange={() => onSomeChange(AbC, true)}
defaultChecked={props.aaa === true}
/>
<div className={cx({hidden: !props.ooo})}>
{props.xxx === AbC && (
<div>
<Input
type="number"
id="min-number2"
name="min-max2"
label=""
defaultValue={props.xxx ? props.yyy.toString() : ''}
onBlur={(e) => onOtherChange(true, inputValue(e.target.value))}
/>
<Input
type="number"
id="min-number2"
name="min-max2"
label=""
defaultValue={props.xxx ? props.yyy.toString() : ''}
onBlur={(e) => onOtherChange(false, inputValue(e.target.value))}
/>
</div>
)}
If you just have only 2 radio inputs and 2 text inputs, you could handle it like this for 1 radio (you could do the same for other radios in your components).
const [radioValueA, setRadioValueA] = setState(false);
const [textValueA, setTextValueA] = setState(false);
onChangeRadio = (radioType, changedValue) => {
if (radioType === 'A') {
setTextValueA('');
setRadioValueA(changedValue);
} else {
// handle other radio button - should be switch if there are many radio input
}
}
// Radio A
<Input
type="radio"
checked={radioValueA}
onChange={event => onChangeRadio('A', event.target.value)}
/>
// Text A
<Input
type="text"
checked={textValueA}
onChange={event => setTextValueA(event.target.value)}
/>
The main ideas is you must control the input text value then set it to empty (clear) when radio button onChange event trigger
Ideally I want to use a single handleChanges function to set state for every field in my form. Right now, I don't really know how to make it so the checkboxes return a specific value, either true or false, or maybe even a string of "yes" or "no" depending on if they are toggled. I don't know where to put the logic for it.
Here is a simplified example of my form:
const ComponentFunction = props => {
const [fields, setFields] = useState({
inputTypeText: "",
textArea: "",
selectDropdown: "",
checkbox: "",
});
const handleChanges = event => {
setField({ ...fields, [event.target.name]: event.target.value });
};
const submitForm = event => {
event.preventDefault();
props.postForm(fields);
};
return (
<>
<form onSubmit={submitForm}>
<label htmlFor="inputTypeText">Input Type Text</label>
<input
id="title"
type="text"
name="title"
onChange={handleChanges}
value={property.title}
/>
<label htmlFor="textArea">Text Area</label>
<textarea
id="textArea"
rows="4"
cols="50"
name="textArea"
value={property.textArea}
onChange={handleChanges}
/>
<label htmlFor="selectDropdown">Select Dropdown</label>
<select onChange={handleChanges} value={property.selectDropdown} name="selectDropdown" id="select">
<option value="">--Select One--</option>
<option value="Stuff">Stuff</option>
</select>
<label htmlFor="checkbox>Check Box</label>
<input
id="checkbox"
name="checkbox"
type="checkbox"
value={property.checkbox}
onChange={handleChanges}
/>
<button type="submit">Submit</button>
</form>
</>
}
I ended up solving this by adding an additional handler just for checkboxes. Not sure if this is totally kosher, but it's pretty clean and worked perfectly.
This is the handler:
const handleClick = event => {
setFields({ ...fields, [event.target.name]: (event.target.checked ? "Checked" : "Not Checked") });
};
This is the checkbox:
<label htmlFor="checkbox">Check Box</label>
<input
id="checkbox"
name="checkbox"
type="checkbox"
onClick={handleClick}
/>