要求用上textInput 并绑定对象的值
时间: 2024-03-15 13:45:12 浏览: 42
好的,下面是一个使用TextInput并绑定对象值的例子:
```js
import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';
function PersonForm() {
const [person, setPerson] = useState({ name: '', age: '' });
const handleNameChange = (text) => {
setPerson({ ...person, name: text });
};
const handleAgeChange = (text) => {
setPerson({ ...person, age: text });
};
return (
<View>
<Text>Name:</Text>
<TextInput value={person.name} onChangeText={handleNameChange} />
<Text>Age:</Text>
<TextInput value={person.age} onChangeText={handleAgeChange} />
</View>
);
}
export default function App() {
return (
<View>
<PersonForm />
</View>
);
}
```
在这个例子中,我们在PersonForm组件中定义了一个person对象,并使用useState来跟踪其值。我们使用两个不同的handleChange函数来处理每个输入框的文本输入,并使用spread运算符和对象解构来更新person对象,以确保我们不会改变对象的原始引用。
我们将TextInput的value属性绑定到相应的person属性,并将onChangeText属性绑定到相应的handleChange函数。这样,当用户输入文本时,我们会更新person对象的相应属性,并且文本输入框将保持同步。
希望这个例子能够帮助你理解如何在React Native中使用TextInput并绑定对象值。
阅读全文