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

我的要求很简单：

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

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

A和B是同级组件。

您可以这样做

在Context.js state中创建一个函数，用于设置输入字段的状态

//context.js state

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

---

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

上下文的必需属性： 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);

import React，{useContext，useState}来自“React”；
从“react dom”导入react dom；
const MyContext=React.createContext（null）；
函数A（）{
const{onChange}=useContext（MyContext）；
const[input，setInput]=useState（null）；
返回(
{
设置输入（如目标值）；
onChange（即目标值）；
}}
/>
);
}
函数B（）{
const{input}=useContext（MyContext）；
返回{input}；
}
函数App（）{
const[input，setInput]=useState（null）；
返回(
这是我的尝试，希望能对你有所帮助

组件a.jsx

import React from "react";
const ComponentA = props => {
  return (
    <div>
      <h1>{`ComponentA: ${props.data}`}</h1>;
      <button onClick={() => props.onValueChange("value changed by ComponentA")}>
        click
      </button>
    </div>
  );
};

export default ComponentA;

import React from "react";
const ComponentB = props => {
  return <h1>{`ComponentB: ${props.data}`}</h1>;
};

export default ComponentB;

import React, { Component } from "react";
import ComponentB from "./componentA";
import ComponentA from "./componentB";

class App extends Component {
    state = {
        data: "common value from parent"
    };

    handleChange = input => {
        this.setState({ data: input });
    };

    render() {
        return (
          <div>
            <ComponentB data={this.state.data}></ComponentB>
              <ComponentA
                data={this.state.data}
                onValueChange={this.handleChange}
              ></ComponentA>
          </div>
    )}
}

App.js

import React from "react";
const ComponentA = props => {
  return (
    <div>
      <h1>{`ComponentA: ${props.data}`}</h1>;
      <button onClick={() => props.onValueChange("value changed by ComponentA")}>
        click
      </button>
    </div>
  );
};

export default ComponentA;

import React from "react";
const ComponentB = props => {
  return <h1>{`ComponentB: ${props.data}`}</h1>;
};

export default ComponentB;

import React, { Component } from "react";
import ComponentB from "./componentA";
import ComponentA from "./componentB";

class App extends Component {
    state = {
        data: "common value from parent"
    };

    handleChange = input => {
        this.setState({ data: input });
    };

    render() {
        return (
          <div>
            <ComponentB data={this.state.data}></ComponentB>
              <ComponentA
                data={this.state.data}
                onValueChange={this.handleChange}
              ></ComponentA>
          </div>
    )}
}

import React，{Component}来自“React”；
从“/componentA”导入组件B；
从“/componentB”导入组件A；
类应用程序扩展组件{
状态={
数据：“来自父项的公共值”
};
handleChange=输入=>{
this.setState（{data:input}）；
};
render（）{
返回(
)}
}
我认为只有通过他们共同的父项才有可能。例如，父项仍然是App.js。您有任何可共享的代码吗？或者您可以看到我的答案，无论您是否正在寻找相同的解决方案？