Question

嘿，我仍然是React natve的新手，我的react native项目中有一个自定义复选框包装器

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>
        );
    }
}

我在这样的页面中称呼它

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

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

  onEdit()
  {
    var convert = this.state.location.toString() //convert = array to string
    this.props.actionsAuth.editOffice(this.props.token, this.state.staffId, convert, (message) => this.showMessage(message));
    this.setState({checked: false})
  }

  showMessage(message) {
    alert(message)
  }

  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 (
      <View style={styles.container}>
        <View style={styles.innerContainer}>
            <View style={styles.checkBoxContainer}> 
              <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)}
                              random={'this is random'}
                              />
                      )
                  }     
              </ScrollView>
            </View>             
                <TouchableOpacity onPress={this.onEdit} style = {styles.button}>
                   <Text style = {styles.buttonText}>Submit</Text>
                </TouchableOpacity>
               </View>   
      </View>
    );
  }
}

并且我想在点击sumbit按钮时取消选中复选框中所有选中的项目，当我调用onEdit函数时，如何告诉checkboxwrapper组件状态将其设置为false。我尝试了上面的代码，但是没有用，有人帮忙吗？

Answer 1

尝试一下

event method id

Answer 2

这不仅简单吗？;

import React, { useState } from 'react'

const yourComponent = () => {
   const [someValue, setSomeValue] = useState('');
}
...
<Item fixedLabel style={{ height: 40 }}>
    <Label>Push Notifications</Label>
        <Switch
            value={pushNotifications}
                selectedValue={pushNotifications}
                onValueChange={value => {
                   setPushNotifications(value)
                }}
        />
</Item>

如何更新其他组件中的状态

2 个答案: