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