React 연습) 텍스트 영역에 문자를 입력하고 버튼을 누르면 내용이 표시됩니다.간단한 어플리케이션

만든 물건

텍스트 영역에 문자를 입력하고 버튼을 누릅니다.
그 내용을 표시합니다.간단한 기능

파일 구조

project/
　├ node_modules/
　├ src/
　|  ├ App.css 
　|  ├ App.js 
　|  ├ index.css  
　|  ├ index.js 
　|  ├ serviceWorkers.js   
　│　└ components/
　│　　　├ Comment/
　|　　　|　　　└ Comment.jsx
　│　　　├ CommentAdder/
　|　　　|  　　└ CommentAdder.jsx
　│　　　└ CommentsList/
　|　　　　　 　└ CommentsList.jsx
　├ .gitignore
　├ README.md
　├ yarn.lock
　└ package.json 

단계

1create-react-app.App.js

yarn global add create-react-app
create-react-app <project>

사용자 정의 모양새를 정의합니다.
자세한 내용은 여기 을 참조하십시오.
원래 넣었던 App.js 내용을 다음과 같이 변경합니다.App.js는 이 프로그램의 전체 기능을 감싸는 상자다.

import React from "react";
import "./App.css";
import CommentsList from "./components/CommentsList/CommentsList";
import CommentAdder from "./components/CommentAdder/CommentAdder";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { list: [] };
  }

  addComment = newComment => {
    this.setState({ list: [...this.state.list,newComment] });
  };

  render() {
    return (
      <div className="App">
        <CommentAdder onAddComment={this.addComment} />
        <CommentsList list={this.state.list} />
      </div>
    );
  }
}

export default App;

2CommentsList.jsxCommentsList.jsx는 주석을 표시하는 상자입니다.props는properties의 줄임말로 부모 구성 요소에서 전달되는 대상이다.부항App.js으로서, 아래쪽은props를 설정하는 곳입니다.<CommentsList list={this.state.list} /> App.jsthis.스테이트 보세요.나는 너에게 그곳의 수조를 주고 있다.
수조이기 때문에 수조 방법을 사용할 수 있다.
그룹 요소는 화면에 실제로 나타나는 주석이 됩니다.
추가 파일로 주석 표시 기능Comment.jsx 제작App.js 에서 손 어셈블리로, CommentsList.jsx 에서 하위 어셈블리로 중첩됩니다.
맵 방법에서 순환하는 모든 요소를 보여주고 싶어서요.
props의 설정 방법은 다음과 같습니다.const comments = props.list.map(comment => <Comment comment={comment} />);

import React from "react";
import Comment from "../Comment/Comment";

const CommentsList = props => {
  const comments = props.list.map(comment => <Comment comment={comment} />);
  return (
    <div className="commentsArea">
      <ul>{comments}</ul>
    </div>
  );
};

export default CommentsList;

3Comment.jsxComment.jsx 하나하나의 평론 자체다.
이것은 p표시로 CommentsList.jsx에서 전달된props의comment를 표시하는 기능입니다.

import React from "react";

const Comment = props =>{
    return (
      <div>
        <p>{props.comment}</p>
      </div>
    );
} 

export default Comment;

4CommentAdder.jsxtextarea가 바뀌면 CommentAdder 상태에 저장됩니다.
버튼을 눌렀을 때 저장된 상태를 부모 구성 요소App.js에 전달합니다.
그렇습니다.
문제는 React가 프로필을 사용하여 데이터를 부모 방향에서 하위 방향으로 전달하지만, 프로필을 사용하여 데이터를 반대 방향, 하위 방향에서 아버지 방향으로 전달할 수 없다는 것이다.
부모 구성 요소에서props로 하위 구성 요소로 리셋합니다
서브어셈블리에서 실행하여 실행합니다.
이해하기 어려우니 코드를 보세요.

import React from "react";

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

  onChange = event => {
    this.setState({ addedComment: event.target.value });
  };

  render() {
    return (
      <div className="adderContainer">
        <textarea
          className="textArea"
          cols="30"
          rows="3"
          value={this.state.addedComment}
          onChange={this.onChange}
        ></textarea>

        <button
          className="button"
          onClick={() => {
            this.props.onAddComment(this.state.addedComment); //ここで親から渡されたメソッドを実行
            this.setState({addedComment:""})　//textareaを空にする
          }}
        >
          ADD
        </button>
      </div>
    );
  }
}

export default CommentAdder;

넘어진 곳

입력한 textarea의 값을 그립니다

onChange 창설 방법을 통해textarea가 변경되었을 때 그 값을 상태에 넣어 문제를 해결합니다.
참조공식 문서.

주의할 일

상태는 immutable!CommentAdder 안에서 나는 방법addComment을 썼고 상태에서 새로운 주석을 설정하여 이렇게 사용하기 시작했다push.
단, React에서 상태는immutable입니다.
원본 그룹을 변경하는 방법을 사용할 수 없습니다.push 원래 배열 자체에 새로운 요소를 추가했기 때문에 사용할 수 없다.
나는 처음에는 이렇게 기술했는데, 동작을 했지만 다시 썼다.

//こちらはダメな例です
addComment = newComment => {
    this.state.list.push(newComment);
    this.setState({ list: this.state.list });
  };

추가 참조 페이지

Spread Syntax
Array.protptype.push()
JavaScript를 사용하여 에뮬레이터에서 배열을 조작하는 방법 요약
여기서 마치겠습니다.