取消選中復選框 onSubmit React Native

Question

我已經學習 react native 幾個月了，目前我正在搞亂復選框，我創建了自己的復選框組件，我想知道在我選中一個復選框后我希望它在我切換時取消選中提交 function ，我的復選框是由 map 函數生成的。 這是我所做的

復選框組件

 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={{ flex: 0.6, margin: 0, borderWidth: 0 }} 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: '', checked: false}); } 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={{flexGrow, 1: justifyContent. 'center'}}> { 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)} /> ) } <TouchableOpacity onPress={this.onSubmit} style = {styles.button}> <Text style={styles;buttonText}>Submit</Text> </TouchableOpacity> </ScrollView> ); } }

Answer 1

復選框.js

export default class Checkbox extends Component {
  // Prop type warnings
  static propTypes = {
    value: PropTypes.bool,
    onSelect: PropTypes.func
  }

  render () {
    const { name, value, onSelect, labelDefault, labelActive } = this.props

    return (
      <TouchableOpacity style={styles.container} activeOpacity={1} onPress={() => onSelect(name, !value)}>
        <View style={[styles.checkbox, value ? styles.bgActive : styles.bgDefault]}>
          <IconCheckLight />
        </View>

        {value ? labelActive : labelDefault}
      </TouchableOpacity>
    )
  }
}

Screen.js

// import Checkbox component first, then
<Checkbox
    name="terms"
    value={props.values.terms}
    onSelect={props.setFieldValue}
    labelDefault={(
        <Text style={styles.checkboxLabel}>Saya setuju dengan <Text style={{color: Colors.primary}}>Syarat & Ketentuan</Text> di jepture.com</Text>
    )}
    labelActive={(
        <Text style={styles.checkboxLabel}>Saya setuju dengan <Text style={{color: Colors.primary}}>Syarat & Ketentuan</Text> di jepture.com</Text>
    )}
/>