how to let a textfiled back to initial status.
enter image description here
step 1 :
when i choice the 'Others ' and give a value to the textfield .
enter image description here
step 2:
now i change 'Others' to '3KG' option. I hope the textfield back to initial status .
with the code as follow , just empty the value,but the title not back to initial position. ...
const handleWeightChange = (event) => {
if(event.target.value === 'a4') {
totalWeightRef.current.focus();
}
else {
totalWeightRef.current.value = null;
}
};
<RadioGroup row aria-label="type" name="name" className={classes.weightradio} onChange={handleWeightChange}>
<FormControlLabel value="a1" control={<Radio />} label="1KG" />
<FormControlLabel value="a2" control={<Radio />} label="2KG" />
<FormControlLabel value="a3" control={<Radio />} label="3KG" />
<FormControlLabel value="a4" control={<Radio />} label="Others" />
</RadioGroup>
<TextField id="totalWeight" label="重量KG" inputRef={totalWeightRef} />
enter image description here
Related
I have Material UI radio buttons in my ReactJS form :
<FormControl className={ styles.rowControl }>
<FormLabel>Direction</FormLabel>
<RadioGroup name="direction" onChange={ this.setOption } ref={ this.directionGroupRef }>
<FormControlLabel
className={ styles.rowFirstLabel }
control={<Radio />}
label="North"
ref={ this.northRef }
value="North"
/>
<FormControlLabel
className={ styles.rowFirstLabel }
control={<Radio />}
label="South"
value="South"
/>
<FormControlLabel
className={ styles.rowFirstLabel }
control={<Radio />}
label="Flip-Flop"
value="Flip-Flop"
/>
</RadioGroup>
</FormControl>
How can I remove any checked statuses among these radio buttons when the form is submitted?
I want to get value on submit, but getting value which is first, its passing null value on selecting female , onChange its working fine
<form onSubmit={handleSubmit(onSubmit)}>
<FormControl>
<FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
<RadioGroup
// onChange={(e)=> console.log(e.target.value)}
{...register("myrad")}
>
<FormControlLabel value="Male" control={<Radio />}label="Male" />
<FormControlLabel value="Female" control={<Radio />}label="Female" />
</RadioGroup>
</FormControl>
<button type="submit">submit</button>
</form>
Replace your form tag with this
<RadioGroup
// onChange={(e)=> console.log(e.target.value)}
name="use-radio-group"
defaultValue="Female"
>
<FormControlLabel
{...register("myrad")}
value="Male"
control={<Radio />}
label="Male"
/>
<FormControlLabel
{...register("myrad")}
value="Female"
control={<Radio />}
label="Female"
/>
</RadioGroup>
I have:
const documentTypes = [
'General',
'Email',
'Fiction story',
'Blog post',
'Newsletter',
'Review',
'Website content'
]
and
<FormControl component="fieldset">
<FormLabel component="legend">Document Type</FormLabel>
<RadioGroup name="documentType" value={docType} onChange={handleChangeDoc}>
{documentTypes.map((documentType, idx) => {
<FormControlLabel value={documentType} control={<Radio />} label={documentType} key={idx} />
})}
<FormControlLabel value="other" control={<Radio />} label={<Input onFocus={() => setDocType('other')} />} />
</RadioGroup>
</FormControl>
but I don't see all of the options. Just the other. What am I doing wrong?
This is with material-ui for react.
I think you only need to return the FormControlLabel in the map.
Options 1) remove the {} around the FormControlLabel
<FormControl component="fieldset">
<FormLabel component="legend">Document Type</FormLabel>
<RadioGroup name="documentType" value={docType} onChange={handleChangeDoc}>
{documentTypes.map((documentType, idx) =>
<FormControlLabel value={documentType} control={<Radio />} label={documentType} key={idx} />
)}
<FormControlLabel value="other" control={<Radio />} label={<Input onFocus={() => setDocType('other')} />} />
</RadioGroup>
</FormControl>
Option 2) Just add return before FormControlLabel
<FormControl component="fieldset">
<FormLabel component="legend">Document Type</FormLabel>
<RadioGroup name="documentType" value={docType} onChange={handleChangeDoc}>
{documentTypes.map((documentType, idx) => {
return <FormControlLabel value={documentType} control={<Radio />} label={documentType} key={idx} />
})}
<FormControlLabel value="other" control={<Radio />} label={<Input onFocus={() => setDocType('other')} />} />
</RadioGroup>
</FormControl>
EDIT: I forgot to say that the onChange on the inputs doesn't work, how do I tell to onChange it's the state value inside the group?
I started to learn React few weeks ago. I want to SUM the group state values and every time it changes the total value changes too. I'm using material ui to create the form. The problem is if I change the state value to int the FormControlLabel value won't work... as a string the total doesn't work as expectable. And how I can handle the total change everytime I change the option?
Thanks in advance.
class App extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
total: 0,
group: {
feedingGroup: "3",
bathingA: "3",
bathingB: "3",
}
}
}
componentDidMount() {
this.setState({ total: this.calculateTotal(this.state.group) });
}
calculateTotal = (values) => {
return Object.entries(values).reduce((finalValue, [key, value]) => {
return finalValue + value;
}, 0);
}
handleSubmit(event) {
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<FormControl component="fieldset" error="" className="">
<RadioGroup aria-label="quiz" name="quiz" value={this.state.group.feedingGroup}
onChange={(value) => { this.setState({ feedingGroup: (value.target.value) }); }}>
<FormControlLabel value="0" control={<Radio />} label="Op1" />
<FormControlLabel value="1" control={<Radio />} label="Op2" />
<FormControlLabel value="2" control={<Radio />} label="Op3" />
<FormControlLabel value="3" control={<Radio />} label="Op4" />
</RadioGroup>
<RadioGroup aria-label="quiz" name="quiz" value={this.state.group.bathingA}
onChange={(value) => { this.setState({ bathingA: (value.target.value) }); }}>
<FormControlLabel value="0" control={<Radio />} label="Op1" />
<FormControlLabel value="1" control={<Radio />} label="Op2" />
<FormControlLabel value="2" control={<Radio />} label="Op3" />
<FormControlLabel value="3" control={<Radio />} label="Op4" />
</RadioGroup>
<Button type="submit" variant="outlined" color="primary" className="">
Check Answer
</Button>
<FormHelperText>{this.state.total}</FormHelperText>
</FormControl>
</form>
);
}
}
export default App;
How about casting the value:
calculateTotal = (values) => {
return Object.entries(values).reduce((finalValue, [key, value]) => {
return finalValue + Number(value);
}, 0);
}
I am having an issue with setting the initial value of a radio group (from a value passed into the function) like this:
export default function SportTeamRanking({team, ...props}) {
So right now I have a Radio Group with 4 radio buttons and the value I want to pre-select or check is contained in the team object specified above (something like team.ranking). This value is passed from a class component into this function. So let's say the team object had a team.ranking value of "rank2" so ideally the Rank 2 radio button would be pre-selected when the function loads.
I have an initial state:
const [value, setValue] = React.useState("");
I've tried setting the React.useState(team.ranking) but still no button is selected.
I also tried using the useEffect and run it only once:
useEffect(() => {
setValue(team.ranking)
}, []);
but with no luck. I tried console logging early on and seems like the team object is still empty while all of this code is already executed?
The goal of this function is to pre-load any saved value that might have been set before (from the team object passed in), then update to a new ranking value if required and save.
For extra info here is the radio group code in the return body:
<FormControl component="fieldset">
<FormLabel component="legend">Team Ranking</FormLabel>
<RadioGroup aria-label="ranking" name="ranking1" value={value} onChange={handleChange}>
<FormControlLabel value="rank1" control={<Radio />} label="Rank 1" />
<FormControlLabel value="rank2" control={<Radio />} label="Rank 2" />
<FormControlLabel value="rank3" control={<Radio />} label="Rank 3" />
<FormControlLabel value="rank4" control={<Radio />} label="Rank 4" />
</RadioGroup>
</FormControl>
And the onChange is simply:
const handleChange = (event) => {
setValue(event.target.value);
};
Any suggestions are appreciated, thanks!
As you have mentioned that the value is passed from a class component to a function component, see if the below code answers your question.
function FormControlLabelPosition(props) {
const onChange = (e) => props.onChange(e.target.value)
return (
<FormControl component="fieldset">
<FormLabel component="legend">Team Ranking</FormLabel>
<RadioGroup aria-label="ranking" name="ranking1" value={props.value} onChange={onChange}>
<FormControlLabel value="rank1" control={<Radio />} label="Rank 1" />
<FormControlLabel value="rank2" control={<Radio />} label="Rank 2" />
<FormControlLabel value="rank3" control={<Radio />} label="Rank 3" />
<FormControlLabel value="rank4" control={<Radio />} label="Rank 4" />
</RadioGroup>
</FormControl>
);
}
export default class Parent extends React.Component {
state = {
value: "rank4"
}
handleChange = (val:string) => this.setState({value: val})
render() {
return (<FormControlLabelPosition value={this.state.value} onChange={this.handleChange}/>)
}
}
Try it out here: https://codesandbox.io/s/material-demo-4ilxb