0

Tenho um código com 3 CheckBox e quando pressionado ele não desmarca... Outra observação, como eu faria para que quando o "UE/HQB" seja selecionado e os outros fiquem disabled={true} ou selecionando primeiro qualquer das outras essa "UE/HQB" se torne disabled={true}

Estou usando: https://github.com/react-native-community/react-native-checkbox

// Estrutura de CheckBox (isso dentro do state) 
checkboxes: [{
    id: 1,
    title: 'UE/HQB',
    checked: false,
}, {
    id: 2,
    title: 'Exportável',
    checked: false,
}, {
    id: 3,
    title: 'Não exportável',
    checked: false,
}],
// Função que lida com o estado dos CheckBox
toggleCheckbox(id) {
    const changedCheckbox = this.state.checkboxes.find(cb => cb.id === id);
    changedCheckbox.checked = !changedCheckbox.checked;
    const checkboxes = Object.assign(
        {},
        this.state.checkboxes,
        changedCheckbox
    );

    this.setState({ checkboxes });
}

Agora o return:

// Dentro do return
<CheckBox
    key={cb.id}
    title={cb.title}
    checked={cb.checked}
    onPress={() =>
        this.toggleCheckbox(
            cb.id
        )
    }
/>
2

2 Respostas 2

0

Primeiramente você esta utilizando aparentemente a versão do CheckBox do react-native-elements. Exemplo:

<CheckBox
    title="Titulo"
    checked={this.state.checked}
    onPress={() => this.setState({checked: !this.state.checked})}
/>

Já para utilizar o react-native-community/checkbox deves seguir o seguinte exemplo:

<CheckBox
    value={true}
    disabled={false}
/>

Com isso, você deve criar uma View com o Checkbox e o texto que será mostrado:

{this.state.checkboxes.map((cb, index) => (
     <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
          <CheckBox
             value={cb.checked}
             onChange={() => this.toggleCheckbox(cb.id)}
          />
          <Text>{cb.title}</Text>
      </View>
))}

Por fim, o principal problema era sua função que alterava os estado dos checkboxes. É interessante, quando estiveres tratando de arrays nos estados, criar variaveis identicas a essas arrays e por fim setar no estado. Função acaba ficando da seguinte forma:

toggleCheckbox(id) {
    // Cria uma variavel "cópia do state dos checkboxes"
    let array_checkboxes = this.state.checkboxes;

    // Percorre a lista
    array_checkboxes.map(cb => {
      // Se encontrar o item que foi clicado na lista
      if (cb.id === id) {
        // Inverte o estado do checkbox
        cb.checked = !cb.checked;
      }
    });

    // Por fim atribui ao estado a listagem que alteramos
    this.setState({
      checkboxes: array_checkboxes,
    });
}

O mais importante realmente é utilizar essa variavel cópia para conseguir manipular facilmente.

Código completo

Funcionamento

0

Acho que essa lib não funciona ou não funcionava no iOs se for onde você está testando. Lembro que quando precisei fazer eu mesmo criei o component, a ideia é bem simples é um (quadrado, circulo ...) com um icone dentro.

fiz um exemplo colocando a letra 'A' que você pode substituir por um ícone e ir alterando os estilos dependendo da mudança do value.

const data = [
  {
      id: 1,
      title: 'UE/HQB',
      checked: false,
  },
  {
      id: 2,
      title: 'Exportável',
      checked: false,
  },
  {
      id: 3,
      title: 'Não exportável',
      checked: false,
  },
]


function App() {
  const [checkboxes, setCheckboxes] = useState(data)

  useEffect(() => {
    // TO see every time when the checkboxes has changed
    console.log(checkboxes)
  }, [checkboxes])

  function handleToggle(id) {
    const newCheckboxes = checkboxes.map(item => {
      if(item.id === id) {
        item.checked = !item.checked
        return item
      }
      return item
    }) 

    setCheckboxes(newCheckboxes)
  }

  function renderItem({ item }) {
    return (
      <Checkbox 
        id={item.id}
        name={item.title}
        value={item.checked}
        handleToggle={handleToggle}
      />
    )
  }

  return (
    <View style={styles.container}>
      <View style={styles.listContainer}>
        <FlatList
          contentContainerStyle={styles.listContainer}
          keyExtractor={(item) => item.id.toString()}
          data={checkboxes}
          renderItem={renderItem}
        />
      </View>
    </View>
  )
}

const styles  = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  listContainer: {
    height: 300,
    padding: 16
  }
})



  //checkbox
export default function Checkbox({
    name = '',
    handleToggle,
    value = false,
    id,
    isDisabled = false,
}) {
  return (
    <View style={styles.container}>
        <TouchableOpacity
            onPress={() => handleToggle(parseInt(id))}
            style={styles.checkbox}
            disabled={isDisabled}
        >
            {value && <Text>A</Text>}
        </TouchableOpacity>
        <Text>{name}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
        height: 60
    },

    checkbox: {
        width: 40,
        height: 40,
        borderWidth: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
})

Em relação ao desabilitar, você faz a sua lógica quando alterar o 'value' porém uma dica o ideal é que cada componente seja independente.

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 .