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
 }
}

使用Context在组件A的onChange上调用setInputField函数，然后可以从组件B的Context获取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);

Answer 3

这是我的尝试，希望对您有帮助

componentA.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;

componentB.jsx

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

export default ComponentB;

App.js

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>
    )}
}

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

3 个答案: