Comme titre,
Je veux cocher la case "cochée" par défaut lorsque la page était complètement chargée,
mais dans le didacticiel sur le composant Material-UI Checkbox ,
n'avait pas les accessoires defaultChecked .
Quand j'ajoute des accessoires checked = {true} , alors j'arrive
comme
"Un composant modifie une entrée non contrôlée de type case à cocher à contrôler ... etc"
Comment dois-je faire?
voici mon code
Je veux lister tout le groupe, inclure le groupe par défaut et l'autre
laissez l'utilisateur choisir plusieurs groupes.
export default class AcceptButton extends Component {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
this.state = {open: true}
}
handleChange = event => {
this.setState({checked: event.target.checked})
}
render() {
return (
<Fragment>
<div>
group :
</div>
<div className="f-col">
{
group.data.map(g => {
if (data.filter(d => d.gid == g.gid).length != 0) {
return (
<FormControlLabel
key={g.gid}
control={
<Checkbox
disabled={true}
onChange = {this.handleChange}
color="primary"
checked={this.state.open}
/>
}
label={g.gname}
/>
)}
else {
return (
<FormControlLabel
key={g.gid}
control={
<Checkbox
onChange={this.handleChange}
value={g.gname}
color="primary"
/>
}
label={g.gname}
/>
)}
})
}
</div>
<button className="btn" onClick={this.postassignhandle}>update</button>
</Fragment>
)
4 Réponses :
import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
class Checkboxes extends React.Component {
state = {
checkedBox: true,
};
handleChange = name => event => {
this.setState({ [name]: event.target.checked });
};
render() {
return (
<div>
<Checkbox
checked={this.state.checkedBox}
onChange={this.handleChange('checkedBox')}
value="checkedBox"
/>
</div>
);
}
}
Try this.
Cochez la case pour indiquer un type de carte
const checkboxstatemap = new Map()
export default class AcceptButton extends Component {
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
this.state = {checkboxstate: group.data.map((item) => checkboxstatemap.set(item.gid, true ))}
}
componentDidMount() {
handleChange = event => {
this.setState({checked: event.target.checked})
}
render() {
return (
<Fragment>
<div>
group :
</div>
<div className="f-col">
{
group.data.map(g => {
if (data.filter(d => d.gid == g.gid).length != 0) {
return (
<FormControlLabel
key={g.gid}
control={
<Checkbox
disabled={true}
onChange = {this.handleChange}
color="primary"
checked={this.state.checkboxstate.get(g.gid)}
/>
}
label={g.gname}
/>
)}
else {
return (
<FormControlLabel
key={g.gid}
control={
<Checkbox
onChange={this.handleChange}
value={g.gname}
color="primary"
/>
}
label={g.gname}
/>
)}
})
}
</div>
<button className="btn" onClick={this.postassignhandle}>update</button>
</Fragment>
)
Mais je ne peux pas savoir combien de cases à cocher devraient avoir. Donc, définir l'état sur tous la case à cocher ne peut pas fonctionner je pense.
@honeytoast est votre champ gid séquentiel?
Non, ce n'est pas le cas.
import React, { useCallback, useState } from 'react';
import { Checkbox, FormControlLabel } from '@material-ui/core';
const defaultProps = {
margin: 'normal',
onChange: (e) => {}
};
const InputCheckbox = (props) => {
const { onChange, label, value=false, name, checkedIcon, icon, className, style } = props;
const [ isChecked, setChecked ] = useState(value);
const _onChange = useCallback(
(e) => {
setChecked((value) => {
onChange(e, { [e.target.name]: !value });
return !value;
});
},
[ onChange ]
);
return <FormControlLabel className={className} style={style} label={label} control={<Checkbox name={name} icon={icon} checkedIcon={checkedIcon} checked={isChecked} onChange={_onChange} />} />;
};
InputCheckbox.defaultProps = defaultProps;
export default InputCheckbox;
use onChange to callback value and use value to do initialize
il a des accessoires defaultChecked et vous pouvez l'utiliser comme:
<Checkbox defaultChecked={true}
onChange={this.handleChange}
color="primary"
/>
J'ai essayé cela, mais React me donne un avertissement: Avertissement: ForwardRef (SwitchBase) contient une entrée de type case à cocher avec les accessoires cochés et par défautChecked. Les éléments d'entrée doivent être contrôlés ou non contrôlés (spécifiez soit le prop vérifié, soit le prop defaultChecked, mais pas les deux). Décidez entre utiliser un élément d'entrée contrôlé ou non et supprimez l'un de ces accessoires.
@TommiL. oui oui, probablement lorsque vous utilisez le prop defaultChecked, le prop vérifié n'est pas nécessairement à utiliser et l'utilisation des props defaultChecked et checked en même temps a une case Intervening for React pour gérer la case à cocher, vous devriez donc supprimer l'un d'entre eux, merci pour votre commentaire
Je me demande pourquoi cet accessoire n'apparaît pas dans la documentation Checkbox.