입문

react의 contextAPI를 배웠기 때문에 필기를 합니다.

결국, 나는 문자를 입력하고submit을 누르면 입력한 문자가 나온다. 마치 todo 응용 프로그램과 같지만, 내가 거기에 오기 전에 나는 힘을 썼다.
지금 문자를 입력하면 그 문자가 표시됩니다!
초보자라서 틀렸으니 조언이 있으면 메시지를 남겨주세요.
코드는 상위 구성 요소의 App입니다.js에는 input와submitbutton 등form이 있습니다.Privider Consumer를 통해 표시되는 todo를 통해 js의 문자를 입력합니다.js의 두 개는 서브어셈블리로 사용됩니다.

참고문

React Context API 정보
상술한 기사를 먼저 읽고 서로 다른 버전의 contextAPI를 보고 싶은 사람용입니다.상술한 보도는 매우 이해하기 쉽다!!그리고 동영상도 있어요.

구현 방법

npm init react-app contextAPI

만든 거 yarn start.
파일 구조
-- App.js
-- src
src에components,contexts
components에form이 있습니다.js todo.js
contexts에 formContext가 있습니다.js
목록을 모르는 알기 쉬운 작법.네, 잘 안 보여요.

코드

App.js

import React from "react";
import "./App.css";
import Form from "./components/form";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ""
    };
  }

  render() {
    return (
      <div className="App">
        <h1>hello</h1>

      <Form />
      </div>
    );
  }
}

export default App;

src/conponents/form.js

import React from "react";
import Todo from "./todo";
import FormContext from "../contexts/formContext";

class Form extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.state = {
      text: ""
    };
  }

  onSubmit = event => {
    this.setState({ text: this.state.text });
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
    console.log(event.target.value)
  };
  render() {
    return (
      <div>
        <input
          type="text"
          name="text"
          onChange={this.handleChange}
        />
        <button
          onClick={this.onSubmit}>submit</button>

        <FormContext.Provider value={this.state}>
          <Todo />
        </FormContext.Provider>
      </div>
    );
  }
}
export default Form;

FormContext.Provider에서value로 위의constructor의text를todo로 합니다.js한테 맡겨.텍스트뿐만 아니라handleChange,onSubmit 등의 함수도 전달할 수 있다.
src/components/todo.js

import React from "react";
import FormContext from "../contexts/formContext";

const Todo = () => (
  <FormContext.Consumer>
    {({ text }) => {
      console.log(text);
      return <div>{text}</div>;
    }}
  </FormContext.Consumer>
);
export default Todo;

여기 텍스트 받았어요.즉, input 입력을 받아들인 문자입니다.
src/contexts/formContexts.js

import { createContext } from "react";

const FormContext = createContext();
export default FormContext;

여기는 잘 모르겠지만 Provider와consumer 사이에서 처리된 것 같습니다.