M1A_29.md

M1#A29 - Formulários (checkbox e radio)

Lembrando que os componentes que não possuem um envento onChange são componentes statefull que possuem um estado próprio mais o react não consegue manipulalos.

Caso coloquemos a propriedade checked temos um comoponente uncontroled e o react avisa que para termos o controle precisamos passar o onChange

render () {
    return (
      <div>
       <form>
         <input type="text" value={this.state.value} onChange={(e) => {
           this.setState({
             value: e.target.value
           })
         }}/>
         <label>
           <input type="checkbox" value='my-checkbox' checked/>
           checkbox
         </label>
       </form>
      </div>
    )
  }

Valores de propriedades true

Qualquer valor de proriedade que tenha um valor booleano passado o react por padrão vem como true se você não declarar nada.

As propriedades boobleanas que não tem seus valores declarados no react vem por padrão como true. Ex:

Checkbox

ender () {
    return (
      <div>
       <form>
         <input type="text" value={this.state.value} onChange={(e) => {
           this.setState({
             value: e.target.value
           })
         }}/>
         <label>
           <input
            type="checkbox"
            value='my-checkbox'
            checked />
           checkbox
         </label>
       </form>
      </div>
    )
  }

Controled Checkbox

'use strict'

import React, { Component } from 'react'

class App extends Component {
  constructor () {
    super()
    this.state = {
      value: 'valor inicial',
      checked: false
    }
  }
  render () {
    return (
      <form>
        <input type="text" value={this.state.value} onChange={(e) => {
          this.setState({ value: e.target.value })
        }}/>

        <label>
          <input
          type="checkbox"
          value='my-checkbox'
          checked={this.state.checked}
          onChange={(e) => {
            this.setState({ checked: !this.state.checked })
          }} />
          Checkbox
        </label>
      </form>
    )
  }
}

export default App

Uncontroled Checkbox

'use strict'

import React, { Component } from 'react'

class App extends Component {
  constructor () {
    super()
    this.state = {
      value: 'valor inicial',
      checked: false
    }
  }
  render () {
    return (
      <form>
        <input type="text" value={this.state.value} onChange={(e) => {
          this.setState({ value: e.target.value })
        }}/>

        <label>
          <input
          type="checkbox"
          value='my-checkbox'
          defaultChecked />
          Checkbox
        </label>
      </form>
    )
  }
}

export default App

Radio

Se aplica da mesma forma que o input checkbox se não passar um evento onChange passa a ser um componentes uncontroled

Radio controled

'use strict'

import React, { Component } from 'react'

class App extends Component {
  constructor () {
    super()
    this.state = {
      value: 'valor inicial',
      checked: false
    }
  }
  render () {
    return (
      <form>
        <input type="text" value={this.state.value} onChange={(e) => {
          this.setState({ value: e.target.value })
        }}/>

        <label>
          <input
          type="checkbox"
          value='my-checkbox'
          onChange={(e) => {
            this.setState({ checked: !this.state.checked })
          }} />
          Checkbox
        </label>

        <input type="radio" name="rd" value="1" onChange={(e) => {
          this.setState({ checked: !this.state.checked })
        }} /> Radio 1
        <input type="radio" name="rd" value="2" onChange={(e) => {
          this.setState({ checked: !this.state.checked })
        }} /> Radio 2
      </form>
    )
  }
}

export default App

Radio uncontroled

'use strict'

import React, { Component } from 'react'

class App extends Component {
  constructor () {
    super()
    this.state = {
      value: 'valor inicial',
      checked: false
    }
  }
  render () {
    return (
      <form>
        <input type="text" value={this.state.value} onChange={(e) => {
          this.setState({ value: e.target.value })
        }}/>

        <label>
          <input
          type="checkbox"
          value='my-checkbox'
          defaultChecked />
          Checkbox
        </label>

        <input type="radio" name="rd" value="1" defaultChecked/> Radio 1
        <input type="radio" name="rd" value="2"/> Radio 2
      </form>
    )
  }
}

export default App