如何根据本机反应中的复选框真假隐藏和显示输入字段 [英] How to hide and display input fields on basis on checkbox true false in react native

问题描述

数组socialMediaDetail[]中的三个值，我必须在复选框的基础上显示和隐藏在输入字段下方，如果复选框为真，则显示其他隐藏.而此复选框为真和假，我必须在数组响应上设置.if name ==="twitter" ?true:false;我必须在下面的 twitter 输入字段中显示 twitter 链接.但是这个数组中数组中的所有值 3 name 和 3 links .条件如何.请帮忙

Thee are three vales in array socialMediaDetail[], I have to show and hide below input fields on basis of checkbox , if checkbox is true then show else hide .And this check box true and false I have to set on array response . if name ==="twitter" ?true:false; and I have to show twitter link in below twitter input fields . but all values in array in this array 3 name and 3 links . How can put the conditions .Please help please

我如何在下面实现，外部函数值我必须在状态下访问

How can I achieve below ,outside function value I have to access in state

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: "[e-mail]"
      name: "twitter"
      __typename: "SocialMediaDetail"
      __proto__: Object
    1:
      link: "[e-mail]"
      name: "facebook"
      __typename: "SocialMediaDetail"
      __proto__: Object
    2:
      link: "[e-mail]"
      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>

谢谢

推荐答案

首先，Checkbox 的 checked 属性应该来自状态字段.

First, the checked property of the Checkbox should be from a state field.

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

[....]

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

然后你必须创建一个条件视图(根据条件出现)，你可以创建一个返回这个视图的函数:

Then you have to create a conditional view (that appears based on a condition), you can create a function that return this view:

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

[...]

当您需要显示条件视图时:

And Whenever you need to show that conditional view:

{this.getMyInputField()}

这篇关于如何根据本机反应中的复选框真假隐藏和显示输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！