我正在尝试一个按钮,以'line-through'划掉文本。我不确定如何将其连接到按钮。
'''
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [name, setName] = useState('shaun')
const clickHandler = () => {
setName('shaun (CROSSED OUT)');
}
return (
<View style={styles.container}>
<Text>My name is {name}</Text>
<Text></Text>
<View style={styles.buttonContainer}>
<Button title='update state' onPress={clickHandler} />
</View>
</View>
);
}
答案 0 :(得分:2)
您可以使用状态变量来跟踪它。
快速示例-
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [name, setName] = useState('shaun')
const [crossedOut, setCrossedOut] = useState(false) // extra state variable
const clickHandler = () => {
setName('shaun (CROSSED OUT)');
setCrossedOut(true) // set it to true on click
}
return (
<View style={styles.container}>
{/* apply style only if crossedOut is true */}
<Text style={crossedOut && {textDecorationLine: 'line-through'}}>My name is {name}</Text>
<View style={styles.buttonContainer}>
<Button title='update state' onPress={clickHandler} />
</View>
</View>
);
}