Question

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

以我的情况为例，如果我直接输入一个新词作为输入，则先前的词或值中的先前值将继续出现而无需更改或替换新的词。

Answer 1

您可以使用此方法：

this.state = {
  email: '13119165220',
}
          onChangeText={text => this.setState({ email: text })}

Answer 2

将输入的值保持在包含此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处理新值。

Answer 3

在功能组件中使用

    @IBAction func addNewItem(_ sender: UIBarButtonItem) {
        let newItem = Item()
        var textField = UITextField()
        
        let alert = UIAlertController(title: "Add New To Do", message: nil, preferredStyle: .alert)
        alert.addTextField { item in
            textField = item
        }
        let action = UIAlertAction(title: "Add", style: .default) { action in
            newItem.title = textField.text!
            try! self.realm.write {
                self.selectedCategory.items.append(newItem)
                self.realm.add(newItem)
            }
            let pos = self.list!.count-1
            self.tableView.insertRows(at: [IndexPath.init(row: pos , section: 0)], with: .left)
        }
        alert.addAction(action)
        present(alert, animated: true, completion: nil)
    }

Answer 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

如何更改输入值本机反应

4 个答案: