在React中,父組件可以通過props將值傳遞給子組件,并通過回調函數的方式從子組件中獲取值。
以下是一個示例:
父組件:
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [childValue, setChildValue] = useState('');
const handleChildValueChange = (value) => {
setChildValue(value);
};
return (
<div>
<ChildComponent onValueChange={handleChildValueChange} />
<p>子組件的值:{childValue}</p>
</div>
);
}
export default ParentComponent;
子組件:
import React, { useState } from 'react';
function ChildComponent({ onValueChange }) {
const [value, setValue] = useState('');
const handleChange = (event) => {
const newValue = event.target.value;
setValue(newValue);
onValueChange(newValue);
};
return (
<input type="text" value={value} onChange={handleChange} />
);
}
export default ChildComponent;
在父組件中,通過使用useState鉤子來創建一個狀態變量childValue,用來存儲子組件的值。
然后,定義一個回調函數handleChildValueChange,它會在子組件的值發生變化時被調用,并將新的值更新到childValue變量中。
在子組件中,通過使用useState鉤子來創建一個狀態變量value,用來存儲輸入框的值。
然后,定義一個handleChange函數,它會在輸入框的值發生變化時被調用,并將新的值更新到value變量中。
同時,調用父組件傳遞過來的onValueChange回調函數,并將新的值作為參數傳遞給父組件。
最后,在父組件中,通過傳遞handleChildValueChange函數給子組件的onValueChange屬性,實現了父組件獲取子組件的值的功能。
當子組件的輸入框的值發生變化時,父組件會自動更新并顯示最新的值。