请写一个expo 在父子组件之间传递对象的值和方法的demo 用useState 并且用textinput 举例
时间: 2024-03-15 15:45:15 浏览: 116
好的,下面是一个使用TextInput,并且在父子组件之间传递对象的值和方法的例子:
```js
import React, { useState } from 'react';
import { View, Text, Button, TextInput } from 'react-native';
function ParentComponent() {
const [person, setPerson] = useState({ name: '', age: '' });
const updatePerson = () => {
console.log('Updated Person:', person);
};
return (
<View>
<Text>Name:</Text>
<TextInput
placeholder="Enter name"
value={person.name}
onChangeText={(text) => setPerson({ ...person, name: text })}
/>
<Text>Age:</Text>
<TextInput
placeholder="Enter age"
value={person.age}
onChangeText={(text) => setPerson({ ...person, age: text })}
/>
<ChildComponent person={person} updatePerson={updatePerson} />
</View>
);
}
function ChildComponent(props) {
const { person, updatePerson } = props;
return (
<View>
<Button title="Update Person" onPress={updatePerson} />
<Text>{person.name}</Text>
<Text>{person.age}</Text>
</View>
);
}
export default function App() {
return (
<View>
<ParentComponent />
</View>
);
}
```
在这个例子中,我们在ParentComponent中定义了一个person对象和一个updatePerson方法,使用两个TextInput组件分别绑定到person的name和age属性,并使用useState来跟踪其值。我们使用spread运算符和对象解构来更新person对象,以确保我们不会改变对象的原始引用。
在ChildComponent中,我们将person和updatePerson作为props传递进来,并在更新按钮上绑定updatePerson方法。当用户点击更新按钮时,我们将调用updatePerson方法并打印person对象的当前值。
希望这个例子能够帮助你理解如何在React Native中使用TextInput,并在父子组件之间传递对象的值和方法。
阅读全文