Definir a propriedade da caixa de seleção no React

1. Caixa de seleção no React
2. Definir uma caixa de seleção check propriedade no React

Os formulários definidos em JSX são mais do que simples elementos HTML. Os formulários devem armazenar e transferir dados internos, portanto, precisam de um estado interno para gerenciá-los.

Vamos tomar as caixas de seleção HTML como exemplo. Em seu estado natural, as caixas de seleção HTML podem armazenar o valor do atributo checked. No entanto, se você estiver desenvolvendo um aplicativo, armazenar os dados no estado interno do elemento é insuficiente. Você precisa armazenar o valor do atributo checked no estado interno de seu aplicativo React para que possa referenciá-lo em todo o aplicativo.

Caixa de seleção no React

Os elementos da caixa de seleção no React devem seguir certas regras. 10 anos atrás, poderia ser aceitável criar novos atributos para elementos HTML condicionalmente. Isso vai contra as recomendações de melhores práticas no React. Qualquer elemento de caixa de seleção deve ser criado com ou sem o atributo checked.

Os elementos da caixa de seleção iniciados sem o atributo checked não são controlados:

<input type="checkbox" name="uncontrolled"></input>

Os elementos da caixa de seleção definidos com o atributo checked são controlados:

<input type="checkbox" checked={true} name="controlled"></input>

Um elemento <input> deve ser iniciado como um componente controlado ou não controlado. Um erro comum é definir o atributo checked para um valor null ou undefined. Um codificador JavaScript pode esperar que esses valores sejam convertidos automaticamente em um valor booleano false, mas o React funciona de maneira diferente.

Erro Confuso

Quando o React encontra qualquer atributo com um valor null ou undefined, ele ignora o atributo e não o renderiza. Posteriormente, se o valor inicial se tornar true, um atributo checked aparecerá novamente, o que aciona a mudança de um componente não controlado para um controlado.

O React lançará um erro, informando que os componentes devem ser inicializados como controlados ou não controlados. Se o componente de caixa de seleção foi definido sem um atributo checked, você não poderia adicionar um mais tarde.

Muitas pessoas não sabem que definir o atributo checked em uma caixa de seleção inicializa-o como um componente controlado. É por isso que eles estão confusos com a mensagem de erro, que diz:

Warning: AwesomeComponent is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Definir uma caixa de seleção check propriedade no React

Depois de entender o problema, é muito fácil corrigi-lo. Se você pretende criar um componente de caixa de seleção controlada, deve garantir que o atributo checked seja avaliado como true ou false. Isso é possível definindo a propriedade defaultProps e definindo o atributo true como false por padrão. Aqui está um amostra de código:

class App extends Component {
  constructor(props) {
    super(props) this.state = {}
  }
  render() {
    console.log('App started');
    this.defaultProps = {
      checked: false
    } return <input type = 'checkbox' checked = {this.checked} name =
                            'controlled'>< /input>
  }
}

Outra vantagem de usar defaultProps é que eles representam apenas o padrão. O usuário ainda pode interagir com o aplicativo e alterar o status do atributo checked.

Definir o atributo checked como true ou false significaria que os usuários não teriam permissão para alterar seu status.