Question

我是一位正在开发实验性React Native应用的iOS开发人员。我有以下代码，在屏幕上显示一个按钮和示例文本。

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的新手，请指导我如何解决错误。

Answer 1

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

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

Answer 2

您可以使用州动态更改文字

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>

   );
 }
}

Answer 3

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

Answer 4

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

ActiveCell.FormulaR1C1 = "=CONCATENATE(RC[-3],RC[-2],RC[-1])"

Range("S1").Select

Selection.copy

Range("S:S").Select

ActiveSheet.Paste

Application.CutCopyMode = False

Answer 5

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

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

Answer 6

带钩子：

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

Answer 7

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;

Answer 8

您最好确保 _onPressButton（）正在做什么。你可以在这个函数中简单地 setState（）而不做任何其他事情，这可以帮助你解决问题。如果你想渲染新的东西，你必须添加返回（）并包装文本。

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

8 个答案: