मेरे पास एक फ़ंक्शन है जिसे मैं एक बटन पर क्लिक करने पर कॉल करता हूं। इस फ़ंक्शन में मैं अलर्ट दिखाने के लिए एक घटक सम्मिलित करता हूं (प्रतिक्रिया-मूल-एससीएल-अलर्ट)

कॉल फ़ंक्शन में प्रवेश करती है (कंसोल लॉग मुद्रित होता है) लेकिन अलर्ट काम नहीं करता है, क्या आप जानते हैं क्यों? ऐसा कुछ है जो मैं गलत कर रहा हूँ?

शुक्रिया

constructor(props) {
    super(props);
this.state = {
//Alert
  show: false
};


alertFeedback() {
    this.setState({ show: true })
    console.log("Inside Alert Feedback")
    if (this.props.Roles == "ROLE") {

        <SCLAlert
          theme="info"
          show={this.state.show}
          title="Lorem"
          subtitle="Lorem ipsum dolor"
          onRequestClose={()=>{}}
        >
          <SCLAlertButton theme="info" onPress={this.stopConnection} >Done1</SCLAlertButton>
          <SCLAlertButton theme="success" onPress={this.stopConnection}>Done2</SCLAlertButton>
          <SCLAlertButton theme="danger" onPress={this.stopConnection}>Done3</SCLAlertButton>
        </SCLAlert>


    } else {
      this.stopConnection();
    }
  }

  stopConnection() {
    this.setState({ show: false })


render() {
    return (
<View style={activity.button}>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.alertFeedback()}
            >
              <Text style={style.buttonTesto}>Stop</Text>
            </TouchableOpacity>
)}
0
Jack23 27 नवम्बर 2019, 14:02

3 जवाब

सबसे बढ़िया उत्तर

नीचे दिया गया कोड आपको हमेशा अपने घटक के रेंडर फ़ंक्शन के अंदर लिखना होगा, और सशर्त अलर्ट के लिए मान यानी this.state.show सही होना चाहिए जब आप इसे दिखाना चाहते हैं।

प्रस्तुत करना इस तरह दिखना चाहिए,

render() {
        return (
            <View style={activity.button}>
                <SCLAlert
                    theme="info"
                    show={this.state.show}
                    title="Lorem"
                    subtitle="Lorem ipsum dolor"
                    onRequestClose={() => { }}
                >
                    <SCLAlertButton theme="info" onPress={this.stopConnection} >Done1</SCLAlertButton>
                    <SCLAlertButton theme="success" onPress={this.stopConnection}>Done2</SCLAlertButton>
                    <SCLAlertButton theme="danger" onPress={this.stopConnection}>Done3</SCLAlertButton>
                </SCLAlert>
                <TouchableOpacity
                    style={[style.button, style.buttonOK]}
                    onPress={() => this.alertFeedback()}
                >
                    <Text style={style.buttonTesto}>Stop</Text>
                </TouchableOpacity>
            </View>
        )
    }

तो कब

if (this.props.Roles == "ROLE") {
    this.setState({show:true})
}

और अपनी कक्षा के अंदर अपने कंस्ट्रक्टर में शो इनिशियलाइज़ करना न भूलें,

constructor(props) {
        super(props)
        this.state = {
            show: false,
    };
}

मुझे आशा है कि यह मदद करता है ...... धन्यवाद :)

2
abhikumar22 27 नवम्बर 2019, 14:24

आपके कोड के अनुसार आप अलर्ट प्रदान नहीं कर रहे हैं, आपको कुछ महत्वपूर्ण जांच जोड़नी चाहिए और उसके आधार पर अलर्ट दिखाना चाहिए जैसे:

  constructor(props) {
    super(props);
    this.state = {
     //Alert
     show: false,
     showAlert:false
    };


  alertFeedback() {
    this.setState({ show: true })
    console.log("Inside Alert Feedback")
    if (this.props.Roles == "ROLE") {

    this.setState({ showAlert: true})


    } else {
      this.stopConnection();
    }
  }

  stopConnection() {
    this.setState({ show: false })


   render() {
    return (
    <View style={activity.button}>
    <div>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.alertFeedback()}
            >
              <Text style={style.buttonTesto}>Stop</Text>
            </TouchableOpacity>

     {this.state.showAlert
      ?  <SCLAlert
          theme="info"
          show={this.state.show}
          title="Lorem"
          subtitle="Lorem ipsum dolor"
          onRequestClose={()=>{}}
        >
          <SCLAlertButton theme="info" onPress={this.stopConnection} 
         >Done1</SCLAlertButton>
          <SCLAlertButton theme="success" onPress= 
         {this.stopConnection}>Done2</SCLAlertButton>
          <SCLAlertButton theme="danger" onPress= 
           {this.stopConnection}>Done3</SCLAlertButton>
        </SCLAlert> 
     :""
</div>

)}

आशा है कि यह काम करेगा !!

0
KCFragrance 27 नवम्बर 2019, 14:19

आपको SCAlert संवाद बॉक्स वापस करने की आवश्यकता है क्योंकि आप इसे रेंडर () विधि में नहीं लिख रहे हैं।

constructor(props) {
    super(props);
this.state = {
//Alert
  show: false
};


alertFeedback() {
    this.setState({ show: true })
    console.log("Inside Alert Feedback")
    if (this.props.Roles == "ROLE") {
      return (
        <SCLAlert
          theme="info"
          show={this.state.show}
          title="Lorem"
          subtitle="Lorem ipsum dolor"
          onRequestClose={()=>{}}
        >
          <SCLAlertButton theme="info" onPress={this.stopConnection} >Done1</SCLAlertButton>
          <SCLAlertButton theme="success" onPress={this.stopConnection}>Done2</SCLAlertButton>
          <SCLAlertButton theme="danger" onPress={this.stopConnection}>Done3</SCLAlertButton>
        </SCLAlert>
     )

    } else {
      this.stopConnection();
    }
  }

  stopConnection() {
    this.setState({ show: false })


render() {
    return (
<View style={activity.button}>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.alertFeedback()}
            >
              <Text style={style.buttonTesto}>Stop</Text>
            </TouchableOpacity>
)}
0
Vivek 27 नवम्बर 2019, 14:14