कैसे प्रतिक्रिया मूल निवासी में एक संपत्ति के रूप में एक घटक के लिए एक समारोह पारित करने के लिए

वोट
0

मैं एक जे एस समारोह जो कुछ उप-घटक के साथ एक दृश्य देता है बनाया है और मैं code.I पुन: उपयोग कर रहा हूँ पता है कि कैसे मैं घटक है जो एक समारोह द्वारा बनाई गई है करने के लिए एक समारोह पारित कर सकते हैं चाहता हूँ

const MenuItem = ({title,indicatorColor,index,onPressItem}) => (
      <TouchableOpacity onPress={()=>onPressItem(index)} >
        <View
          style={{
            paddingLeft: 20,
            paddingBottom: 15,
            paddingTop: 15,
            flexDirection: 'row',
            width: 150,
            borderRightWidth: 2,
            borderRightColor: 'Colors.GREY_TWO',
            backgroundColor: indicatorColor,
            alignItems: 'center',
          }}>
          <View 
            style={{
              backgroundColor: 'black',
              height: 5,
              width: 5,
              borderRadius: 3,
              alignSelf: 'center',
  
            }} 
          /> 
          <Text style={{fontSize: 15, left: 5,alignItems: 'center',}}>{title}</Text>
        </View>
      </TouchableOpacity>
  );

  const onMenuItemPress = (index) => {
      console.log('menu selected:'.index);
  }
  
  <MenuItem title='Sort' indicatorColor='red' index='0' onPress={onMenuItemPress} />

ऊपर कोड फेंकता है और एक त्रुटि कह onMenuPress कार्य नहीं है, का सुझाव दें।

13/01/2020 को 23:58
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
0

लपेटें अंदर समारोह Componentआप लौट रहे हैं:

const MenuItem = ({title,indicatorColor,index,onPressItem}) => {

     const onMenuItemPress = (index) => {
         console.log('menu selected:'.index);
     }

     return (
      <TouchableOpacity onPress={()=>onPressItem(index)} >
        <View
          style={{
            paddingLeft: 20,
            paddingBottom: 15,
            paddingTop: 15,
            flexDirection: 'row',
            width: 150,
            borderRightWidth: 2,
            borderRightColor: 'Colors.GREY_TWO',
            backgroundColor: indicatorColor,
            alignItems: 'center',
          }}>
          <View 
            style={{
              backgroundColor: 'black',
              height: 5,
              width: 5,
              borderRadius: 3,
              alignSelf: 'center',

            }} 
          /> 
          <Text style={{fontSize: 15, left: 5,alignItems: 'center',}}>{title} 
          </Text>
        </View>
      </TouchableOpacity>
     )
  };


  <MenuItem title='Sort' indicatorColor='red' index='0' onPress={onMenuItemPress} />
14/01/2020 को 00:06
का स्रोत उपयोगकर्ता

वोट
1
const MenuItem = ({title,indicatorColor,index,onPressItem}) => (
          <TouchableOpacity onPress={()=>onPressItem(index)} >
            <View
              style={{
                paddingLeft: 20,
                paddingBottom: 15,
                paddingTop: 15,
                flexDirection: 'row',
                width: 150,
                borderRightWidth: 2,
                borderRightColor: 'Colors.GREY_TWO',
                backgroundColor: indicatorColor,
                alignItems: 'center',
              }}>
              <View 
                style={{
                  backgroundColor: 'black',
                  height: 5,
                  width: 5,
                  borderRadius: 3,
                  alignSelf: 'center',

                }} 
              /> 
              <Text style={{fontSize: 15, left: 5,alignItems: 'center',}}>{title}</Text>
            </View>
          </TouchableOpacity>
      );

      const onMenuItemPress = (index) => {
          console.log('menu selected:'.index);
      }

      <MenuItem title='Sort' indicatorColor='red' index='0' onPressItem={onMenuItemPress} />

आप रंगमंच की सामग्री में onPressItem और नहीं onPress का उपयोग करना चाहिए

14/01/2020 को 00:24
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more