使用React上下文将输入数据从组件A传递到组件B

Question

我的要求很简单：

您能否提供一个示例，其中使用上下文API将输入数据从组件A传递到组件B。

要求：在组件A中应该输入一个输入值。我们使用上下文将输入值发送到组件B。

A和B是同级组件。

Answer 1

您可以这样做。

以Context.js状态使您可以设置输入字段状态的函数。

//context.js state

state = {
 inputFieldName: null,
 setInputField: ()  => {
    this.setState() //set value for inputFieldName here
 }
}

使用上下文在组件A的onChange上调用setInputField函数，您可以从组件B的上下文中获取inputFieldName状态。

Answer 2

上下文的必需属性：1.一个字符串属性，用于存储用户的输入2.一种更新用户输入的方法。

并且在您的情况下，组件A产生输入并调用该方法以将其更新为上下文。组件B消耗上下文中输入的更改。它最终得到了这样的原型。

import React, { useContext, useState } from "react";
import ReactDOM from "react-dom";

const MyContext = React.createContext(null);

function A() {
  const { onChange } = useContext(MyContext);
  const [input, setInput] = useState(null);

  return (
    <input
      type="text"
      value={input}
      onChange={e => {
        setInput(e.target.value);
        onChange(e.target.value);
      }}
    />
  );
}

function B() {
  const { input } = useContext(MyContext);
  return <div>{input}</div>;
}

function App() {
  const [input, setInput] = useState(null);

  return (
    <MyContext.Provider value={{ input, onChange: setInput }}>
      <div>
        <A />
        <B />
      </div>
    </MyContext.Provider>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);