Question

您是数组socialMediaDetail[]中的三个值，我必须根据复选框显示和隐藏输入字段下方，如果复选框为true，则显示其他隐藏。并且此复选框为true和false，我必须在数组响应上进行设置。 if name ==="twitter" ?true:false;我必须在以下Twitter输入字段中显示Twitter链接。但此数组中数组中的所有值都包含3个名称和3个链接。如何放置条件。请帮助

如何在状态下访问以下外部函数值

class UpdateNotificationpreference extends Component {
  constructor(props) {
    super(props);
    const{navigation}=this.props;
    const{contactDetails,socialMediaDetails}= navigation.state.params.customerInfo[0];
    const{socialMediaDetail}=socialMediaDetails;
    socialMediaDetail.map((data, index) => {
      const twitter= data.name==="twitter";
    });
    this.state = {
      title: 'Update Notification Preference',
      mobile: navigation.state.params.serviceNumber,
      icon: 'sim',
      isChecked: false,
      email: navigation.state.params.customerInfo[0].contactDetails.emailId,
      smsNum: navigation.state.params.customerInfo[0].contactDetails.mobileNo,
      phoneNum: navigation.state.params.customerInfo[0].contactDetails.mobileNo,
      isContactByEmail: navigation.state.params.customerInfo[0].contactDetails.isContactByEmail==="Y"?true : false,
      isContactByPost:navigation.state.params.customerInfo[0].contactDetails.isContactByPost==="Y"?true : false,
      isContactBySms: navigation.state.params.customerInfo[0].contactDetails.isContactBySms==="Y"?true : false,
      facebook: navigation.state.params.customerInfo[0].socialMediaDetails.socialMediaDetail[1].name==="facebook"?true : false,
      isTwitter:this.twitter==="twitter"?true:false,

下面是数组值：

socialMediaDetails:
  socialMediaDetail: Array(2)
    0:
      link: "HARIRAM@twitter.com"
      name: "twitter"
      __typename: "SocialMediaDetail"
      __proto__: Object
    1:
      link: "VarnaHERO@facebook.com"
      name: "facebook"
      __typename: "SocialMediaDetail"
      __proto__: Object
    2:
      link: "linkedIn@linkedin.com"
      name: "linkedIn"
      __typename: "SocialMediaDetail"

代码如下：

  <RegularText style={{ fontWeight: 'normal' }} text={`SOCIAL MEDIA`} textColor="dimgrey"/>
</View> 
<View style={{borderBottomColor: 'dimgrey',borderBottomWidth: 0.3, color:'dimgrey'}} />

<View style={{ flex: 1, justifyContent: 'center',paddingLeft:15,marginTop:8,marginBottom:15 }}>
  <View style={{flexDirection:'column', marginBottom:15,marginTop:8}}>
    <View style={{flexDirection:'row'}}>
      <View >
      <CheckBox color="#00678f" checked={true}/>
      </View>
      <View style={{flex:1}}>
        <Text style={{fontSize:14}}>Facebook</Text>
      </View>
      <View style={{flex:1}}>
        <CheckBox color="#00678f"
         checked={true}
          onPress={() =>this.handleChangeEmail()}/>
      </View>
      <View style={{flex:1}}>
        <Text style={{fontSize:14}}>Whatsapp</Text>
      </View>
      <View style={{flex:1}}>
        <CheckBox color="#00678f" 
        checked={true}
         onPress={() =>this.handleChangeSMS()}/>
      </View>
      <View style={{flex:1}}>
        <Text style={{fontSize:14}}>Twitter</Text>
      </View>

    </View>
  </View>
<View style={{marginBottom:15,paddingLeft:15}}>
  <View>
    <View style={{
      flexDirection:'row', backgroundColor:'#fff',marginBottom:8}}>
      <IconSmall icon="facebook" type="MaterialCommunityIcons" style={{ color: '#808080',paddingRight: 5 }}/>
      <SmallText textColor="grey" text={`Facebook`}/>
    </View>
    <Item style={{borderColor: '#00fff', borderBottomWidth:1, marginLeft:0}}>
      <Input
        value={this.state.email}
        onChangeText={(text) => this.setState({email:text})}
      />
    </Item>
  </View>
  <View style={{marginTop:15}}>
    <View style={{
      flexDirection:'row', backgroundColor:'#fff',marginBottom:8}}>
    <IconSmall icon="whatsapp" type="MaterialCommunityIcons" style={{ color: '#808080',paddingRight: 5 }}/>
    <SmallText textColor="grey" text={`Whatsapp`}/>
    </View>
    <Item style={{borderColor: '#00fff', borderBottomWidth:1, marginLeft:0}}>
      <Input
        value={this.state.smsNum}
        onChangeText={(text) => this.setState({smsNum:text})}
      />
    </Item>
  </View>
  {this.state.twitter=== true  &&
    <View style={{marginTop:15}}>
      <View style={{
          flexDirection:'row', backgroundColor:'#fff'}}>
        <IconSmall icon="twitter" type="MaterialCommunityIcons" style={{ color: '#808080',paddingRight: 5 }}/>
        <SmallText textColor="grey" text={`Twitter`}/>
      </View>
      <Item style={{borderColor: '#00fff', borderBottomWidth:1, marginLeft:0}}>
        <Input
          value={this.state.faxNum}
          onChangeText={(text) => this.setState({faxNum:text})}
        />
      </Item>
    </View>}
</View>

谢谢

Answer 1

首先，checked的{{1}}属性应该来自状态字段。

Checkbox

[....]

constructor(props){
  super(props);
  this.state = {
    checked: true
  }
}

然后您必须创建一个条件视图（基于条件出现），您可以创建一个返回该视图的函数：

<CheckBox 
    color="#00678f"
    checked={this.state.checked}
    onPress={() =>{
        this.setState({checked: !this.state.checked});
        this.handleChangeEmail()}}
/>

[...]

并且无论何时需要显示该条件视图：

getMyInputField(){
    if(this.state.checked === false){
        return null; //nothing to show
    }
    return(
        <YourInputView/>
    )
}

如何基于复选框隐藏和显示输入字段true在react native中为false

1 个答案: