На самом деле я пишу мобильное приложение для школы, и у меня возникают проблемы при попытке изменить содержимое текста, когда я нажимаю кнопку TouchableOpacity.
Я хочу этого: когда я нажимаю кнопку (фактически текстовую кнопку), она меняет содержимое текста на фактический текст кнопки (представьте себе меню, в котором вам нужно выбрать приложение, например: discord/yammer и т. д.... и когда вы нажимаете на приложение, которое вы хотите, чтобы изменить фактическое «...» по имени приложения)
визуально вам в помощь :
Для этого я написал это:
const PopupMenuSelect = () => {
const [visible, setVisible] = useState(false);
const scale = useRef(new Animated.Value(0)).current;
let content = '...';
const options = [
{
title: 'Spotify',
icon: 'spotify',
action: () => content = options.title,
},
{
title: 'Yammer',
icon: 'yammer',
action: () => content === options.title,
},
{
title: 'Trello',
icon: 'trello',
action: () => content === options.title,
},
{
title: 'Twitter',
icon: 'twitter',
action: () => content = options.title,
},
{
title: 'Discord',
icon: 'discord',
action: () => content === options.title,
},
{
title: 'Outlook',
icon: 'mail-bulk',
action: () => content === options.title,
},
]
function resizeBox(to){
to === 1 && setVisible(true);
Animated.timing(scale,{
toValue:to,
useNativeDriver:true,
duration:200,
easing: Easing.linear,
}).start(() => to === 0 && setVisible(false));
}
return (
<>
<TouchableOpacity onPress = {() => resizeBox(1)}>
<Text style = {[style.subtext, { color: layouts.secondary }]}>{content}</Text>
</TouchableOpacity>
<Modal transparent visible = {visible}>
<SafeAreaView style = {{ flex: 1 }} onTouchStart = {() => resizeBox(0)}>
<Animated.View
style = {[
style.popUp,
{ opacity: scale.interpolate({ inputRange: [0, 1], outputRange:[0, 1]}) },
{ transform: [{ scale }]},
]}
>
{options.map((op, i) => (
<TouchableOpacity style = {[style.option, { borderBottomWidth: i === options.length - 1 ? 0 : 1 }]} key = {i} onPress = {op.action}>
<Text style = {{fontFamily: "Title-Font", fontSize: 15}}>{op.title}</Text>
<FontAwesome5 name = {op.icon} size = {26} color = {'black'} style = {{marginLeft: 10}}/>
</TouchableOpacity>
))}
</Animated.View>
</SafeAreaView>
</Modal>
</>
)
}
export default PopupMenuSelect;
Я создаю переменную let с именем 'content' = '...' и я установил действие кнопки, чтобы заменить содержимое заголовком «опции»
как это :
action: () => content = options.title,
но это не сработало, содержимое не менялось, когда я нажимал кнопку (Spotify или что-то в этом роде).
Спасибо большое заранее, ребята, люблю вас



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Представление перерисовывается только при изменении состояния, content — это разрешение. Вы можете решить проблему, изменив содержимое на состояние. Измените содержимое на заголовок параметра при запуске onPress.
const [content, setContent] = useState('')
...
<TouchableOpacity ... onPress = {() => setContent(op.title)}>
...
</TouchableOpacity>
Другой вариант, если вы действительно хотите обработать его из action в массиве, может состоять в том, чтобы передать параметр в функцию
const options = [
{
title: 'Spotify',
icon: 'spotify',
action: (option) => setContent(option.title),
},
....
];
...
<TouchableOpacity ... onPress = {() => op.action(op)}>
...
</TouchableOpacity>
проблема в "options.title"
Это не сработало, '...' исчезло, но 'spotify' не заменило его... оно просто исчезло