ReactJS флажок значение по умолчанию

Question

У меня проблема с установкой флажка, установленного прямо при загрузке, чтобы пользователь всегда выбирал его с помощью ReactJS. Я довольно новичок, чтобы реагировать, и сейчас я много борюсь с такими вещами.

Мой код такой

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>

И на Check-Checked файл выглядит так

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" в свойствах поля, и я получаю значение = "true" в html, но это действительно дает мне те результаты, которые я желаю, когда я снова нажимаю на флажок, как в первый раз, когда он не распознает. Может быть, он ожидает события onclick или что-то в этом роде, но я совсем не понимаю. Любая помощь?

Answer 1

Решается с помощью initialValues ​​в форме, делая значения флажков истинными прямо при загрузке, например:

<Form
  initialValues={{
    section: true,
    menus: true
  }}

продолжается с того момента, когда имя поля используется для передачи true значение.

Answer 2

Здесь показано, как обрабатывать отмеченное состояние 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" />