如何更改输入反应本机的值

Posted 2023-03-15

【中文标题】如何更改输入反应本机的值

【英文标题】：How to change value of input react native

【发布时间】：2019-03-12 03:18:59

【问题描述】：

抱歉，我是 React Native 新手，想知道如何更改当前输入值？

在我的情况下，如果我直接输入一个新词，输入前一个词或值中的前一个值将继续出现而不改变或替换新的。

【问题讨论】：

你试过在输入元素中加入 onChangeText 事件吗？

【参考方案1】：

类组件：

将输入的值保持在包含此TextInput 组件的组件的状态中。

class ParentComponent extends React.Component 
  constructor (props) 
    super(props)
    this.state =  queryText: '' 
  

  handleInputTextChange = (newText) => 
    this.setState( queryText: newText )
  

  render () 
    return (<View>
      <TextInput 
        onChangeText=this.handleInputTextChange 
        value=this.state.queryText
      />
    </View>)
  

注意我是如何使用onChangeText 和handleInputTextChange 来处理新值的。

功能组件：

在功能组件中，我们使用钩子。要保存和更新文本值，我们使用useState

export default () => 
  const [text, setText] = useState("");

  return <TextView value=text onChangeText=setText />;
;

【讨论】：

他们再次破坏了TextInput.clear()（至少对于 ios，介于版本 0.61.5 和 0.65.1 之间），所以我花了半天时间试图找到解决方法。这对我有帮助，谢谢！

【参考方案2】：

你好，你可以用这个方法：

this.state = 
  email: '13119165220',

onChangeText=text => this.setState( email: text ) 

【参考方案3】：

在功能组件中使用

export default () => 

const [text,setText] = React.useState("")

return <TextView
          value=text
          onChangeText=setText />

【参考方案4】：

TextInput 需要的值是要在 TextInput 中显示的值。

并且要更新您使用 onChangeText 的值，该值将在每次 TextInput 中的文本发生更改时调用您指定的任何函数。

根据你是学习带钩子还是不带代码的 React 会改变：

带钩子：

import React,useState from 'react'
//others import

function MyTextInput (props)
     const [userInput,setUserInput] = useState()
return (
   <TextInput 
        value = userInput
        onTextChange = (text) => setUserInput(text) /> //is always better call another function
    )                                                    // where you can validate the input

如果你使用类和编码没有钩子，逻辑是一样的，只是改变语法：

import React,Component from 'react'
//other imports
class MyTextInput extends Component
constructor(props)
   super(props)
   this.state = 
           userInput:''
   
render()
    return (
        <TextInput value = this.state.userInput 
             onChangeText =  text => this.setState(userInput:text) />
    )
  

这里是文档的链接，您可以在其中找到 TextInput 收到的所有带有说明的道具：https://reactnative.dev/docs/textinput