mercredi 13 novembre 2019

Uncheck Checkbox onSubmit React Native

I've been learning react native for a couple a months now and currently I'm messing with checkbox, and I created my own checkbox component and I want to know after I checked a checkbox I want it to be unchecked when I toggle onSubmit function, and my checkboxes are generated by map funtion. Here is what I've done

CheckBox Component

class CheckBoxWrapper extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            checked: false,
            location: ""
        }
    }

    render() {
        return (
            <View style={this.props.style} >
                <CheckBox
                    checkedIcon={this.props.checkedIcon}
                    uncheckedIcon={this.props.uncheckedIcon}
                    checkedColor={this.props.checkedColor}
                    uncheckedColor={this.props.uncheckedColor}
                    textStyle={this.props.textStyle}    
                    containerStyle=
                    size={this.props.size ? this.props.size : normalize(18)}
                    title={this.props.title}
                    checked={this.state.checked }
                    onPress={() => {
                        this.setState({ checked: !this.state.checked }); 
                        this.props.onCheck(this.props.value);
                    }}
                />
            </View>
        );
    }
}

export default CheckBoxWrapper;

Pages.js

class Edit extends Component 
{
  constructor() {
    super();
    this.state= {
      location: [],
      checked: false,
    }

    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit()
  {
    var convert = this.state.location.toString() 
    this.props.actionsAuth.editOffice(this.props.token, this.state.staffId, convert, (message) => this.showMessage(message));
    this.setState({ staffId : ''});
    this.setState({checked: false})
    Keyboard.dismiss();
  }

  componentDidMount(){
    this.props.actionsAuth.getOfficeList(this.props.token);
  }
  
  onItemChecked(val) {
    var array = this.state.location;
    var x = 0;
    
    array.join(',')
    if(array.length === 0)
    {
      array.push(val)
      this.setState({ location: array})
    }
    else{
      var found=false;
    while (x < array.length)
    {
      if(array[x] === val)
      {
        found=true;
        array.splice(x, 1);
      }
      x = x+1;
    }
    if(!found)
    array.push(val)
  }
    this.setState({ location: array})
  }

  render() {

    return (
        <ScrollView contentContainerStyle=>
            {
                this.props.offices.map((item, key) => 
                <CheckBoxWrapper
                    key={key}
                    title={item.nama_variable} 
                    value={item.kode}
                    checkedIcon={<Image source={img.checkBox.checked} style={styles.checkBox}/>}
                    uncheckedIcon={<Image source={img.checkBox.unchecked} style={styles.checkBox}/>}
                    checked={this.state.checked}  
                    onCheck={this.onItemChecked.bind(this)}
                    random={'this is random'}
                />
                )
            }    
            <TouchableOpacity onPress={this.onSubmit} style = {styles.button}>
                <Text style={styles.buttonText}>Submit</Text>
            </TouchableOpacity> 
        </ScrollView>                         
    );
  }
}



Aucun commentaire:

Enregistrer un commentaire