0

Estou trabalhando em uma aplicação com react, porem sou iniciante no assunto e encontrei um problema. Eu quero gerar um template pra ser usado depois, e as opções desse template sao opcionais e selecionadas atraves de um checkbox, tudo funciona, porem, quero que duas opções sejam permanentes, como o checkbox clicado, porem vou esconder ele da tela. Eu tinha pensando em fazer um checkbox clicado por padrão e display: none;, porem, apesar de conseguir fazer ele iniciar clicado, o valor nao se aplica na inicialização, porem se vc clicar nele, o valor aplica e funciona, mas eu nao quero que esse checkbox sequer apareça. Porem, essa solução parece meio gambiarra, tem um outro metodo de fazer o envio dos valores que o checkbox representa sem precisar do checkbox em si sendo escondido na pagina?

Segue abaixo o codigo

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>

E o arquivo Checkbox-Checked esta assim

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
2
  • Compartilhe o código que você já tem assim podemos ajudar de forma mais direta. 12/03/2019 às 12:54
  • Adicionei, vacilo meu kkk 12/03/2019 às 16:05

1 Resposta 1

1

Resolvido com initialValues dentro do form que renderiza o checkbox.

<Form
  onSubmit={handleSubmit}
  validate={validate}
  initialValues={{
    section: true,
    menus: true
  }}

Como pode se ver no codigo postado na pergunta, logo apos o validade foi colocado o initialValues, usando o nome de cada campo como referencia para o valor ser true logo após o carregamento do componente

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .