在React中,子組件向父組件傳值可以通過兩種方式實現:
父組件示例代碼:
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [value, setValue] = useState('');
const handleChildValue = (childValue) => {
setValue(childValue);
};
return (
<div>
<ChildComponent onValueChange={handleChildValue} />
<p>Value from child component: {value}</p>
</div>
);
}
export default ParentComponent;
子組件示例代碼:
import React, { useState } from 'react';
function ChildComponent({ onValueChange }) {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
onValueChange(event.target.value);
};
return (
<div>
<input type="text" value={inputValue} onChange={handleChange} />
</div>
);
}
export default ChildComponent;
在上面的示例中,子組件ChildComponent
接收一個onValueChange
的props,它是一個回調函數。當子組件的輸入框的值發生變化時,會調用handleChange
函數,將輸入的值傳遞給onValueChange
回調函數,從而將值傳遞回父組件。
父組件示例代碼:
import React, { useState } from 'react';
import { MyContext } from './MyContext';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [value, setValue] = useState('');
return (
<div>
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
<p>Value from child component: {value}</p>
</div>
);
}
export default ParentComponent;
子組件示例代碼:
import React, { useContext, useState } from 'react';
import { MyContext } from './MyContext';
function ChildComponent() {
const value = useContext(MyContext);
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<div>
<input type="text" value={inputValue} onChange={handleChange} />
<p>Value from parent component: {value}</p>
</div>
);
}
export default ChildComponent;
在上面的示例中,父組件ParentComponent
創建了一個MyContext
,并將value
放入MyContext.Provider
的value屬性中。子組件ChildComponent
通過useContext
來獲取MyContext
的值,并將其顯示在頁面上。子組件也可以通過input
的onChange
事件來更新inputValue
的狀態值,但這個值只在子組件中存在,并不會傳遞給父組件。