如何使用上下文 API 将子组件数据共享到父组件到 React Js

Question

我想在不单击按钮的情况下将子组件 (Product.js) 数据共享到父组件 (App.js) 中。我将 useState 与上下文 API 一起使用。我不知道如何在没有点击事件的情况下传递这些数据。

Product.js 数据显示到 console.log() 到 App.js 组件中。

App.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

请帮助我没有反应的高级知识。

Answer 1

在没有点击事件的情况下，使用 useContext 和 useState 共享信息的三种方式。

1. 使用上下文
2. 子组件中的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.父组件中的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;

希望我对你有所帮助。祝你有美好的一天！

Answer 2

如果它是直接的孩子与父母的交流，最好使用道具来完成。更少的代码，工作正常！

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

Answer 3

使用 useContext 和 useState 在没有点击事件的情况下共享信息。

App.js

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

import ProductList from './ProductList';

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

export default App;

ProductList.js

import React, { useContext } from 'react';
import { Context } from './Store';
import Product from './Product';
import AddProduct from './AddProduct';

const ProductList = () => {

  const [state, setState] = useContext(Context);

  console.log(state);

  return (
    <>
      <AddProduct />
      <Product />
    </>
  )
}

export default ProductList

AddProduct.js

import React, { useContext} from 'react';
import { Context} from './Store';

const AddProduct = () => {
    const [products, setProducts] = useContext(Context);


    return (
        <div>
            Description:- <input type="text" 
            onChange={(e) => setProducts({ ...products, Description: e.target.value })}/>
        </div>
    )
}

export default AddProduct

产品.js

import React, { useContext} from 'react';
import { Context} from './Store';

const Product = () => {
const [products, setProducts] = useContext(Context);

    return (
        <>
<h2>Product</h2>
<p>Description: {products.Description}</p>
        </>
    )
}

export default Product

Store.js

import React, { useState } from 'react';

const product = {
    Description: '',
};

export const Context = React.createContext();

const Store = ({ children}) => {
    const [products, setProducts] = useState(product);

    return (
        <Context.Provider value={[products, setProducts]}>{children}</Context.Provider>
    );
};

export default Store;