如何將子組件資料共享到父組件uisng背景關系API到Reactjs

我想在不單擊按鈕的情況下將子組件 (Product.js) 資料共享到父組件 (App.js) 中。我將 useState 與背景關系 API 一起使用。我不知道如何在沒有點擊事件的情況下傳遞這些資料。

Product.js 資料顯示到 console.log() 到 App.js 組件中。

應用程式.js

import React from 'react';
import Product from './Product';

function App() {
  return (
    <div className="App">
      <Product />
    </div>
  );
}

export default App;

產品.js

import React from 'react';

const Product = () => {
    return (
        <div>
           Product Name: <input type="text" />
           <br />
           Description:- <input type="text" />
        </div>
    )
}

export default Product

請幫助我對反應一無所知。

uj5u.com熱心網友回復：

使用 useContext 和 useState 在沒有單擊事件的情況下共享資訊的方式共有三種。

1. 使用背景關系
2. childComponent 中的 useState
3. 父組件中的 useState

1.使用背景關系

import { createContext, useContext, useState } from 'react';

import React from 'react';

const Context = createContext();

const Product = () => {
  const [info, setInfo] = useContext(Context);
  return (
    <div>
      Product Name: <input type="text" value={info.name} onChange={(e) => {
      setInfo({ ...info, name: e.target.value });
    }} />
      <br />
      Description:- <input type="text" value={info.desc} onChange={(e) => {
      setInfo({ ...info, desc: e.target.value });
    }} />
    </div>
  );
}

function App() {
  const [info, setInfo] = useState({
    name: '',
    desc: ''
  });

  return (
    <div className="App">
      <Context.Provider value={[info, setInfo]}>
        <Product />
      </Context.Provider>
    </div>
  );
}

export default App;

如果您將每個組件都放在一個檔案中。您必須在第三個檔案中創建背景關系并從父組件和子組件匯入它。

2. childComponent 中的 useState

import { useEffect, useState } from 'react';

import React from 'react';

const Product = ({ setParentInfo }) => {
  const [info, setInfo] = useState({ name: '', desc: '' });
  useEffect(() => {
    setParentInfo(info);
  }, [info])
  return (
    <div>
      Product Name: <input type="text" value={info.name} onChange={(e) => setInfo({ ...info, name: e.target.value  })} />
      <br />
      Description:- <input type="text" value={info.desc} onChange={(e) => setInfo({ ...info, desc: e.target.value  })} />
    </div>
  )
}

let info = { name: '', desc: '' }

function App() {
  return (
    <div className="App">
      <Product setParentInfo={(newInfo) => {
        info = { ...newInfo };
      }} />
    </div>
  );
}

export default App;

3. parentComponent 中的 useState

import { useState } from 'react';

import React from 'react';

const Product = ({ info, setParentInfo }) => {
  return (
    <div>
      Product Name: <input type="text" value={info.name} onChange={(e) => setParentInfo({ ...info, name: e.target.value  })} />
      <br />
      Description:- <input type="text" value={info.desc} onChange={(e) => setParentInfo({ ...info, desc: e.target.value  })} />
    </div>
  )
}


function App() {
  const [info, setInfo] = useState({ name: '', desc: '' });
  console.log("parent: ", info);
  return (
    <div className="App">
      <Product info={info} setParentInfo={(newInfo) => {
        setInfo({ ...newInfo });
      }} />
    </div>
  );
}

export default App;

我希望我已經幫助了你。祝你今天過得愉快！

uj5u.com熱心網友回復：

如果它是直接子級到父級的通信，最好使用 props 來完成。更少的代碼，作業正常！

App.js:-

import React from 'react';
import Product from './Product';

function App() {
  return (
    <div className="App">
      <Product 
         onProductNameChange={productName => console.log(productName)} 
         onProductDescChange={productDesc => console.log(productDesc)}
      />
    </div>
  );
}

export default App;

Product.js:-

import React from 'react';

const Product = ({onProductNameChange, onProductDescChange}) => {
    return (
        <div>
           Product Name: <input type="text" onChange={e => onProductNameChange(e.target.value)} />
           <br />
           Description:- <input type="text" onChange={e => onProductDescChange(e.target.value)} />
        </div>
    )
}

export default Product

標籤：反应 反应原生 反应钩子

上一篇：使用PandasPython格式化字典

下一篇：反應中的影像點擊