如何在react-ts实现子组件向父组件传值
时间: 2023-12-30 22:02:29 浏览: 31
在React中,子组件向父组件传递值需要使用回调函数。具体实现步骤如下:
1. 在父组件中定义一个处理子组件传值的函数,该函数作为props传递给子组件。
```typescript
interface Props {
onChildValueChange: (value: string) => void;
}
export const Parent: React.FC<Props> = ({onChildValueChange}) => {
return (
<div>
<Child onValueChange={onChildValueChange} />
</div>
);
};
```
2. 在子组件中定义一个处理值改变的函数,并在值改变时调用父组件传递的回调函数。
```typescript
interface Props {
onValueChange: (value: string) => void;
}
export const Child: React.FC<Props> = ({onValueChange}) => {
const [value, setValue] = useState('');
const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const newValue = event.target.value;
setValue(newValue);
onValueChange(newValue);
};
return (
<div>
<input type="text" value={value} onChange={handleValueChange} />
</div>
);
};
```
在上面的代码中,当子组件中的input值改变时,会调用handleValueChange函数,该函数会更新子组件的value值,并调用父组件传递的回调函数onValueChange,将新的value值传递给父组件。
3. 在父组件中实现处理子组件传递值的函数。
```typescript
const handleChildValueChange = (value: string) => {
console.log(`Child value changed to ${value}`);
};
```
4. 将处理子组件传递值的函数作为props传递给父组件。
```typescript
<Parent onChildValueChange={handleChildValueChange} />
```
这样子组件就可以向父组件传递值了。当子组件的值改变时,会调用父组件传递的回调函数,并将新的值传递给父组件。