如何在 React Native 中按下按钮时更改文本值？

Posted 2023-02-15

【中文标题】如何在 React Native 中按下按钮时更改文本值？

【英文标题】：How to change text Value upon Button press in React Native?

【发布时间】：2017-12-15 22:20:51

【问题描述】：

我是一名 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: 
);

上面的代码显示文本和一个按钮。

但是，当我单击按钮时，应用程序崩溃，而不是显示要显示的新文本。

我是 React Native 新手，请指导我如何解决错误。

【参考方案1】：

import React,  useState  from "react";
import  View, Text  from "react-native";

const App = () => 
  const [value, setValue] = useState("Mohd Sher Khan");

  const hellod = () => 
    setValue("value changed");
    
  ;

  return (
    <View>
      <Text onPress=hellod>value</Text>
    </View>
  );
;

export default App;

【参考方案2】：

带钩子：

import React, useState from "react";
import Button, Text, View from "react-native";

const App = () => 
  const [text, setText] = useState("Initial text");

  const onPressHandler = event => setText("Changed text");

  return (
    <View>
      <Text>text</Text>
      <Button title="Change Text" onPress=onPressHandler />
    </View>
  );
;

【参考方案3】：

在状态方法中设置我的文本，然后在按下的按钮中更新状态，然后在文本中设置如下：

<Text>
    this.state.myText
</Text>

【参考方案4】：

您可以使用状态来保留您的默认文本，然后按下我们更新状态。

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>
    )
  

【参考方案5】：

您可以使用状态来动态更改文本

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>

   );
 

【参考方案6】：

这是因为你的 onPress 函数有点奇怪，你想在按下时调用一个动作，而不是 jsx 元素。您的 changeTextValue 应该传递到您的按钮的 onPress 中。

【讨论】：

*你的 changeTextValue。不是你。

【参考方案7】：

您可以使用此方法在单击按钮时更新值

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>
   

【参考方案8】：

您最好确定 _onPressButton() 正在做什么。你可以在这个函数中简单地setState()，什么都不做，可以帮你解决问题。如果你想渲染一些新的东西，你必须添加 return() 并包裹 Text。