Javascript 如何在 React Native 中按下按钮时更改文本值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45041577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change text Value upon Button press in React Native?
提问by SeaWarrior404
I'm an iOS developer currently working on an experimental React Native app. I have the following code which shows a button and sample text on the screen.
我是一名 iOS 开发人员，目前正在开发一个实验性的 React Native 应用程序。我有以下代码，它在屏幕上显示一个按钮和示例文本。
import React from 'react';
import { StyleSheet, Text, View , Button } from 'react-native';
export default class App extends React.Component {
constructor() {
super();
this.state = {sampleText: 'Initial Text'};
}
changeTextValue = () => {
this.setState({sampleText: 'Changed Text'});
}
_onPressButton() {
<Text onPress = {this.changeTextValue}>
{this.state.sampleText}
</Text>
}
render() {
return (
<View style={styles.container}>
<Text onPress = {this.changeTextValue}>
{this.state.sampleText}
</Text>
<View style={styles.buttonContainer}>
<Button
onPress={this._onPressButton}
title="Change Text!"
color="#00ced1"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5deb3',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {}
});
The above code displays text and a button.
上面的代码显示文本和一个按钮。
However when I click the button, the app crashes instead of showing the new text which is to be shown.
但是，当我单击按钮时，应用程序崩溃而不是显示要显示的新文本。
I'm new to React Native, kindly guide me on how to solve the error.
我是 React Native 的新手，请指导我如何解决错误。
回答by klendi
You could use a state to keep your default text and then on press we update the state.
您可以使用状态来保留您的默认文本，然后在按下时我们更新状态。
import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
export default class App extends Component {
state = {
textValue: 'Change me'
}
onPress = () => {
this.setState({
textValue: 'THE NEW TEXT GOES HERE'
})
}
render() {
return (
<View style={{paddingTop: 25}}>
<Text>{this.state.textValue}</Text>
<Button title="Change Text" onPress={this.onPress} />
</View>
)
}
}
回答by Muhammd Asad Chattha
You can use state for dynamically change the text
您可以使用状态来动态更改文本
import React, {Component} from 'react';
import {Text, Button, View} from 'react-native';
export default class App extends Component{
constructor(){
super();
this.state = {
textValue: 'Temporary text'
}
this.onPressButton= this.onPressButton.bind(this);
}
onPressButton() {
this.setState({
textValue: 'Text has been changed'
})
}
render(){
return(
<View style={{paddingTop: 20}}>
<Text style={{color: 'red',fontSize:20}}> {this.state.textValue} </Text>
<Button title= 'Change Text' onPress= {this.onPressButton}/>
</View>
);
}
}
回答by Matt Aft
It's because your onPress function is a little weird, you want to invoke an action on press, not have jsx elements. Your changeTextValueis what should be passed into your button's onPress.
这是因为你的 onPress 函数有点奇怪，你想在按下时调用一个动作，而不是有 jsx 元素。你changeTextValue是什么应该传递到你的按钮的 onPress。
回答by Chaitanya Parashar
You can use this approach for updating a value on click of a button
您可以使用此方法在单击按钮时更新值
class App extends React.Component {
constructor() {
super();
this.state = { val: 0 }
this.update = this.update.bind(this)
}
update() {
this.setState({ val: this.state.val + 1 })
}
render() {
console.log('render');
return <button onClick={this.update}>{this.state.val}</button>
}
}
回答by Hyman Au
You better make sure what _onPressButton()is doing. You can simply setState()in this function and do nothing else, which can help you solve the problem. If you want to render something new, you have to add return() and wrap up Text.
你最好确定_onPressButton()在做什么。你可以在这个函数中简单的setState()什么都不做，可以帮助你解决问题。如果你想渲染一些新的东西，你必须添加return() 并结束 Text。
