Как установить флажок в компоненте Material-UI React?
Судя по заголовку
Я хочу установить флажок «отмечено» по умолчанию, когда страница была полностью загружена,
но в туториале про Компонент флажка Material-UI,
не было defaultChecked реквизита.
Когда я добавляю checked = {true} реквизит, то получаю стрелу
например
"Компонент изменяет неконтролируемый ввод типа флажка на управляемый... и т.д."
Как мне поступить?
вот мой код
Я хочу перечислить всю группу, включить группу по умолчанию и другие
позвольте пользователю выбрать несколько групп.
export default class AcceptButton extends Component {
constructor(props) {
super(props)
this.handleChangeEvent = this.handleChangeEvent.bind(this)
this.state = {open: true}
}
handleChangeEvent = 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.handleChangeEvent}
color = "primary"
checked = {this.state.open}
/>
}
label = {g.gname}
/>
)}
else {
return (
<FormControlLabel
key = {g.gid}
control = {
<Checkbox
onChange = {this.handleChangeEvent}
value = {g.gname}
color = "primary"
/>
}
label = {g.gname}
/>
)}
})
}
</div>
<button className = "btn" onClick = {this.postassignhandle}>update</button>
</Fragment>
)
Ответы 4
import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
class Checkboxes extends React.Component {
state = {
checkedBox: true,
};
handleChangeEvent = name => event => {
this.setState({ [name]: event.target.checked });
};
render() {
return (
<div>
<Checkbox
checked = {this.state.checkedBox}
onChange = {this.handleChangeEvent('checkedBox')}
value = "checkedBox"
/>
</div>
);
}
}
Попробуй это.
Сделан флажок для типа карты
const checkboxstatemap = new Map()
export default class AcceptButton extends Component {
constructor(props) {
super(props)
this.handleChangeEvent = this.handleChangeEvent.bind(this)
this.state = {checkboxstate: group.data.map((item) => checkboxstatemap.set(item.gid, true ))}
}
componentDidMount() {
handleChangeEvent = 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.handleChangeEvent}
color = "primary"
checked = {this.state.checkboxstate.get(g.gid)}
/>
}
label = {g.gname}
/>
)}
else {
return (
<FormControlLabel
key = {g.gid}
control = {
<Checkbox
onChange = {this.handleChangeEvent}
value = {g.gname}
color = "primary"
/>
}
label = {g.gname}
/>
)}
})
}
</div>
<button className = "btn" onClick = {this.postassignhandle}>update</button>
</Fragment>
)
@honeytoast ваше поле gid последовательное?
Нет, это не так.
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;
используйте onChange для обратного вызова и используйте значение для инициализации
у него есть реквизит по умолчанию проверено, и вы можете использовать его как:
<Checkbox defaultChecked = {true}
onChange = {this.handleChangeEvent}
color = "primary"
/>
Я пробовал это, но затем React выдает мне предупреждение: Warning: ForwardRef(SwitchBase) contains an input of type checkbox with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.
@ТоммиЛ. да, верно, вероятно, когда вы используете опору defaultChecked, проверенную опору не обязательно использовать, и при использовании опор по умолчаниюChecked и проверенных одновременно есть вмешательство для React для управления флажком, поэтому вы должны удалить один из них, спасибо за ваш комментарий
Интересно, почему эта поддержка не отображается в документации Checkbox.
Но я не могу знать, сколько флажков должно быть. Так что я думаю, установить флажок для всех состояний не может.