我正在制作一個 react-native 應用程式，我需要有人幫助我處理我的一堆代碼
只需單擊一下，我就需要禁用該按鈕。有人可以幫忙嗎？問題是，我正在使用道具，因此我無法禁用屬性。
`
import React from "react";
import { View, Text, StyleSheet , Button, Image ,TouchableOpacity} from 'react-native'
import colors from "../../constants/colors";
const DoctorItem = props =\> {
return(
\<TouchableOpacity onPress={props.onViewDetail}\>
\<View style={styles.dr}\>
\<Image style={styles.img} source={{uri:props.image}}/\>
\<Text style= {styles.title}\>{props.title}\</Text\>
\<Text style= {styles.price}\>{props.price} RS \</Text\>
\<View style = {styles.actions}\>
\<Button style={styles.btn} color={colors.primary} title="View Details " onPress={props.onViewDetail} /\>
\<Button style = {styles.btn} color={colors.primary} title="To Registration" onPress={props.onRegistration} /\>
\</View\>
\</View\>
\</TouchableOpacity\>
);
}
const styles= StyleSheet.create({
dr:{
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: 'white',
height: 300,
margin: 20,
},
img:{
width: '100%',
height: '60%'
},
title:{
fontSize: 18,
marginVertical : 4,
textAlign:'center',
fontFamily:'opsb'
},
price:{
fontSize : 14,
color:'#888',
textAlign:'center',
fontFamily:'ops'
},
actions:{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: '25%',
paddingHorizontal: 20
},
btn : {
padding:5,
color:colors.primary
}
});
export default DoctorItem;\
`
import React from 'react';
import { FlatList, Text } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import dr from '../../store/reducers/dr';
import DoctorItem from '../../components/Doctor/DoctorItem';
import DrDetail from '../shop/DrDetail';
import \* as appointActions from '../../store/actions/appoint';
import {HeaderButtons,Item} from 'react-navigation-header-buttons';
import CustomHeaderButton from '../../components/UI/headerButton';
import colors from '../../constants/colors';
const drscreen = props =\> {
const dr = useSelector(state =\> state.dr.availableDr);
const dispatch = useDispatch()
return (
\<FlatList
data={dr}
keyExtractor={item =\> item.id}
renderItem={itemData =\> \<DoctorItem
image= {itemData.item.imageUrl}
title={itemData.item.title}
price={itemData.item.price}
onViewDetail={()=\>{
props.navigation.navigate('DoctorDetails',{
doctorId:itemData.item.id,
doctorTitle:itemData.item.title
});
}}
onRegistration={()=>{
dispatch(appointActions.appointDoc(itemData.item))
}}
/>}
/>
);
};
drscreen.navigationOptions = navData =\> {
return{
headerTitle: 'All Doctors',
headerRight: (
<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
<Item
title="Appoint"
iconName={"ios-checkmark-done-outline"}
onPress={() => {
navData.navigation.navigate ("Register")
}}
/>
</HeaderButtons>
)
}
};
export default drscreen;\
`
曾嘗試使用禁用功能，但可能不正確。如果有人熟悉這種編碼格式，請幫忙。
uj5u.com熱心網友回復：
state即使您通過onPress道具傳遞函式，您仍然可以使用 a 。我們可以定義一個處理這兩者的函式，如下所示。
const DoctorItem = props => {
const [enabled, setEnabled] = useState(true)
function handlePress() {
props.onRegistration()
setEnabled(false)
}
return(
<TouchableOpacity onPress={props.onViewDetail}/>
<View style={styles.dr}\>
<Image style={styles.img} source={{uri:props.image}}/>
<Text style= {styles.title}>{props.title}\<Text />
<Text style= {styles.price}>{props.price} RS </Text>
<View style = {styles.actions}\>
<Button style={styles.btn} color={colors.primary} title="View Details " onPress={props.onViewDetail} />
<Button disabled={!enabled} style = {styles.btn} color={colors.primary} title="To Registration" onPress={handlePress} />
</View>
</View>
</TouchableOpacity>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454504.html
標籤：javascript 反应 反应式 按钮 反应还原