91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

react子組件怎么向父組件傳值

小億
227
2024-01-08 10:30:00
欄目: 編程語言

在React中,子組件向父組件傳值可以通過兩種方式實現:

  1. 通過回調函數: 父組件可以通過props將一個回調函數傳遞給子組件,子組件可以通過調用這個回調函數并傳遞參數來將值傳遞回父組件。

父組件示例代碼:

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回調函數,從而將值傳遞回父組件。

  1. 使用Context: 父組件可以通過創建一個Context,并將需要傳遞的值放入Context的Provider中,子組件可以通過Context的Consumer來獲取這個值。

父組件示例代碼:

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的值,并將其顯示在頁面上。子組件也可以通過inputonChange事件來更新inputValue的狀態值,但這個值只在子組件中存在,并不會傳遞給父組件。

0
淄博市| 东乌| 洱源县| 布尔津县| 乐昌市| 宁夏| 双城市| 瑞金市| 江陵县| 文成县| 奉新县| 辽宁省| 河东区| 渭源县| 什邡市| 栾川县| 海晏县| 商都县| 龙陵县| 中西区| 萝北县| 涞水县| 庄河市| 禄丰县| 天等县| 嵩明县| 织金县| 宁乡县| 浏阳市| 乌兰浩特市| 竹溪县| 安仁县| 集贤县| 祥云县| 临安市| 肥乡县| 得荣县| 竹山县| 金昌市| 遵义市| 玛沁县|