我有问题设置一个复选框,以便在加载时右键检查,以始终使用ReactJ选择用户选择。我的反应是新手,目前对这种事情很挣扎。
我的代码就像这个
import DbCheckbox2 from 'modules/Checkbox-Checked'
const GenerateTemplateComponent = ({
handleSubmit,
handleCancel,
classes
}) => {
return (
<Form
onSubmit={handleSubmit}
validate={validate}
render={({ handleSubmit, invalid, pristine, form: { change } }) => (
<form className={classes.form} onSubmit={handleSubmit}>
<PanelBody>
<Grid container>
<Grid item xs={12} md={12}>
<Field
name='name'
component={DbInputField}
required
label={<FormattedMessage id='offre-name' />}
/>
</Grid>
<Grid container>
<Grid item xs={6} md={6}>
<Field
//className={classes.inputCheckbox}
name='section'
component={DbCheckbox2}
type='checkbox'
color='primary'
label={<FormattedMessage id='offre-section' />}
/>
</Grid>
和复选框检查文件就像
import React from 'react'
import FormControl from '@material-ui/core/FormControl'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import Checkbox from '@material-ui/core/Checkbox'
const DbCheckbox2 = ({
label,
className,
checked=true,
value=true,
}) => (
<FormControl className={className} component="fieldset">
<FormControlLabel
control={
<Checkbox
checked={checked}
value={value}
/>
}
label={label}
/>
</FormControl>
)
export default DbCheckbox2
我尝试在字段属性上添加 value =" true" ,并且我在HTML上获得了一个值=" true",但是当我再次单击时,它确实为我带来了我想要的结果在复选框上,就像第一次无法识别的一样。也许他正在等待一个持续的活动,但我根本不明白。有帮助吗?
这向您展示了如何处理检查状态a复选框:
class App extends React.Component {
constructor(props) {
super(props);
this.state = { checkbox1: true };
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const element = e.target;
this.setState({
[element.name]: element.checked
});
}
render() {
return (
<input
type="checkbox"
name='checkbox1'
checked={this.state.checkbox1}
onChange={ this.handleChange }/>
)
}
}
ReactDOM.render( < App / > ,
document.getElementById('root')
);
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root" />
用表单上的初始值求解,使复选框值在加载时为TRUE,例如:
<Form
initialValues={{
section: true,
menus: true
}}
继续,该字段的名称用于传递 true value。