Wenn Sie in React möchten, dass eine übergeordnete Komponente den Wert einer untergeordneten Komponente verwendet, können Sie dies auf zwei Arten tun:
Leiten Sie Daten über Requisiten weiter
Untergeordnete Komponenten können ihre Werte über Requisiten an übergeordnete Komponenten weitergeben. Die übergeordnete Komponente kann eine Funktion definieren und diese Funktion dann über Requisiten an die untergeordnete Komponente übergeben. Wenn sich der Wert einer untergeordneten Komponente ändert, kann sie diese Funktion aufrufen, um den neuen Wert an die übergeordnete Komponente zu übergeben.
Hier ist ein Beispiel:
// 子组件中的value就是来自父组件。当子组件的value发生改变，可以调用函数发射给父组件，让父组件获取这个值
function ChildComponent(props) {
return (
<input type="text" value={
props.value} onChange={
props.onChange} />
);
}
// 父组件
function ParentComponent() {
const [value, setValue] = useState('');
function handleValueChange(event) {
setValue(event.target.value);
}
return (
<div>
<ChildComponent value={
value} onChange={
handleValueChange} />
<p>Child Component Value: {
value}</p>
</div>
);
}
ChildComponentIn diesem Beispiel empfängt die untergeordnete Komponente valuezwei onChangeRequisiten und wendet sie auf ein <input>Element an. Wenn <input>sich der Wert des Elements ändert, ruft es onChangedie Funktion auf und übergibt ihr den neuen Wert.
Die übergeordnete Komponente ParentComponentdefiniert eine Zustandsvariable valueund eine Funktion handleValueChangeund übergibt diese Funktion als onChangeRequisiten an die untergeordnete Komponente. Wenn sich der Wert der untergeordneten Komponente ändert, ruft sie handleValueChangedie Funktion auf und übergibt ihr den neuen Wert. Die übergeordnete Komponente kann ihren eigenen Status mit diesem neuen Wert aktualisieren.
Rufen Sie den Wert der untergeordneten Komponente über die React-Referenz ab
Eine andere Möglichkeit besteht darin, den Wert der untergeordneten Komponente über React Ref abzurufen. Sie können in der übergeordneten Komponente eine Referenz erstellen und diese Referenz dann an die untergeordnete Komponente übergeben. In untergeordneten Komponenten können Sie diesen Verweis an ein DOM-Element binden und seinen Wert bei Bedarf über dieses DOM-Element abrufen.
Hier ist ein Beispiel:
// 子组件
function ChildComponent(props) {
return (
<input type="text" ref={
props.inputRef} />
);
}
// 父组件
function ParentComponent() {
const inputRef = useRef(null);
function handleButtonClick() {
const value = inputRef.current.value;
console.log('Child Component Value:', value);
}
return (
<div>
<ChildComponent inputRef={
inputRef} />
<button onClick={
handleButtonClick}>Get Child Component Value</button>
</div>
);
}
ParentComponentIn diesem Beispiel erstellt die übergeordnete Komponente eine Referenz inputRefund inputRefübergibt sie als Requisiten an die untergeordnete Komponente ChildComponent. Ist in untergeordneten Komponenten inputRefan ein <input>Element gebunden. Wenn auf die Schaltfläche in der übergeordneten Komponente geklickt wird, ruft diese den Wert des Elements ab inputRef.current.valueund <input>gibt ihn auf der Konsole aus.
Es ist zu beachten, dass das Abrufen des Werts der untergeordneten Komponente über ref erst dann wirksam wird, wenn die untergeordnete Komponente im DOM gerendert wurde. Sie müssen also warten, bis die untergeordnete Komponente gerendert ist, bevor Sie ihren Wert in der übergeordneten Komponente erhalten.