当前位置: 首页 > 知识库问答 >
问题:

将新值呈现为TextInput React Native

秦宏盛
2023-03-14

我有一个react原生表单,它有一个按钮,可以根据用户的信息自动填充一些字段。关键是,即使我更新了与一个TextInput相关的状态变量,TextInput也不会显示这样的数据。为了简单起见,这里有一个简短的片段

export default class Component extends React.Component {    
    constructor(props) {
        super(props);

        this.state = {
            value: null
        }
    }

        autocompile = () => {
            this.setState({"value": "new value"})
        }
        
        render() {
            return (
                <View>
                  <TouchableOpacity
                    onPress={() => {
                      this.autocompile
                    }}>
                    <Text>Autocompile</Text>
                  </TouchableOpacity>
                  <TextInput
                      onChangeText={(value) => this.setState({'value': value})}
                      value={this.state.value}
                  />
                </View>
            )
        }
    }
}

按照这个示例,如果我单击“AutoCompile”,下面的TextInput将不会显示新值,即使状态变量将被更新。我的问题是,我如何从外部更新一个TextInput显示的值而不输入?

共有1个答案

华俊贤
2023-03-14

类组件解决方案

import React from 'react';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';

export default class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.autocompile = this.autocompile.bind(this);
  }

  autocompile() {
    this.setState({ value: 'new value' });
  }

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.autocompile}>
          <Text>Autocompile</Text>
        </TouchableOpacity>
        <TextInput
          onChangeText={(value) => this.setState({ value: value })}
          value={this.state.value}
        />
      </View>
    );
  }
}

函数组件解决方案

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, TextInput } from 'react-native';

const App = () => {
  const [value, setValue] = useState('');

  const autocompile = () => setValue('new value');

  return (
    <View>
      <TouchableOpacity onPress={() => autocompile()}>
        <Text>Autocompile</Text>
      </TouchableOpacity>
      <TextInput onChangeText={(value) => setValue(value)} value={value} />
    </View>
  );
};

export default App;
 类似资料:
  • 我是一个初学者React开发人员,我对这个特定的代码片段有一个问题。 问题: 虽然我直接复制了虚拟数据的值并将其作为单独的子项呈现,但并不是所有的虚拟数据都被呈现 我特意选择使用useRef而不是useState,因为在用户添加或编辑他们想要的任何链接之后,我想将keyRef发送到NoSQL数据库;然而,当我使用useState()时,它给了我陈旧的状态问题,其中包含所有链接的数组没有不断更新。

  • 问题内容: 我使用“消息”界面将消息传递给用户,如下所示: 我想在变量中包含html 并呈现它,而不在模板中转义标记。 问题答案: 如果你不想转义HTML,请查看过滤器和标签: safe: autoescape:

  • 我只是启动libgdx,这看起来很简单,但我不明白。screen对象中的render方法将调用WorldRenderer中的render方法: //屏幕呈现方法

  • 问题内容: 我正在使用Node.js的Forms库(Forms),它将在后端为我呈现一个表单: 最后一行创建一个HTML块,如下所示: 基本上只是一长串HTML。然后,我尝试使用EJS和Express通过以下代码进行渲染: 但是在渲染HTML时,只是我上面发布的字符串,而不是实际的HTML(因此是我想要的一种形式)。有什么方法可以使用EJS将字符串呈现为实际的HTML?还是我必须使用类似Jade的

  • 问题内容: 我正在制作一个游戏链接网站,用户可以在其中发布指向自己喜欢的网络游戏的链接。人们发布游戏时,应该检查游戏属于哪一类。我决定允许每个游戏包含多个类别,因为某些游戏可以分为多个类别。所以问题是,我该如何处理呢?以及如何将其显示为“复选框”,其中必须选中至少一个?以及如何在“管理”中将其显示为复选框? 这是代码 楷模: 观看次数: 形式: 谢谢! 问题答案: 那应该可以解决您的观点,但是我不