在React TypeScript中,可以通过使用回调函数将子组件的输入值传递给父组件。以下是一种常见的方法:
import React, { useState } from 'react';
const ParentComponent: React.FC = () => {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (value: string) => {
setInputValue(value);
};
return (
<div>
<ChildComponent onInputChange={handleInputChange} />
<p>输入值: {inputValue}</p>
</div>
);
};
import React from 'react';
interface ChildProps {
onInputChange: (value: string) => void;
}
const ChildComponent: React.FC<ChildProps> = ({ onInputChange }) => {
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
onInputChange(value);
};
return (
<div>
<input type="text" onChange={handleChange} />
</div>
);
};
在这个例子中,父组件ParentComponent
通过onInputChange
回调函数将子组件ChildComponent
的输入值传递给父组件,并更新父组件的状态变量inputValue
。子组件中的输入框的值发生变化时,会触发handleChange
函数,该函数会调用onInputChange
回调函数并传递输入框的值。
这种方法可以在React TypeScript中实现子组件向父组件传递输入值的功能。根据具体的业务需求,可以进一步扩展和优化代码。
领取专属 10元无门槛券
手把手带您无忧上云