Create

CREATE

App.js - create 전체 코드

(...)
  function Create(props){
      return <article>
          <h2>Create</h2>
          <form onSubmit={(event) => {
              event.preventDefault(); 
            //   페이지가 리로드 되지 않음.
            const title = event.target.title.value; // title의 value 값을 가져올 수 있다.
            const body = event.target.body.value; // title의 value 값을 가져올 수 있다. 
            props.onCreate(title, body);
          }}>
              <p><input type='text' name= 'title' placeholder='title' /> </p>
              {/* name은 사용자가 입력한 데이터의 이름이다. 
              placeholder는 어떤 정보를 입력하면 되는지를 알려준다. (힌트 개념) */}
              <p><textarea name='body' placeholder='body'></textarea></p>
              <p><input type='submit' value='Create'  /> </p> 
          </form>
      </article>
  }
  (...)

const [nextId, setNextId] = useState(4);

(...)

else if(mode === "CREATE"){
        content = <Create onCreate={(_title, _body) =>{
            const newTopic = {id:nextId, title:_title, body:_body}
             const newTopics = [...topics] 
            newTopics.push(newTopic); 
            setTopics(newTopics); 
            setMode('READ');
            setId(nextId);
            setNextId(nextId+1);
        }}> </Create>
    }
    (...)
            <a href='/create' onClick={(event) =>{
                event.preventDefault();
                setMode('CREATE');
            }}>Create</a>

App.js - create.return 부분

            <a href='/create' onClick={(event) =>{
                event.preventDefault();
                setMode('CREATE');
            }}>Create</a>

をクリックして、Createをmodeに変更し、Createを使用してUIを表示します.onClick (URL이 바뀌지 않도록 event.preventDefault()을 작성해준다. )を入力modeを入力して値を変更します.
そうすると、setMode('CREATE');をクリックすると、Createの値が変更され、modeが再実行され、App()にまたがります.if문

else if(mode === "CREATE"){
        content = <Create onCreate={(_title, _body) =>{
            const newTopic = {id:nextId, title:_title, body:_body}
             const newTopics = [...topics] 
            newTopics.push(newTopic); 
            setTopics(newTopics); 
            setMode('READ');
            setId(nextId);
            setNextId(nextId+1);
        }}> </Create>
    }

このため、App.js - if문によりelse ifの条件が設定され、個別の素子が指定される.
ユーザが生成ボタンを押すと,後続操作のインタフェースを提供するためにonCreate propに関数が渡される.mode === "CREATE"

  function Create(props){
      return <article>
          <h2>Create</h2>
          <form onSubmit={(event) => {
              event.preventDefault(); 
            const title = event.target.title.value; 
            const body = event.target.body.value; 
            props.onCreate(title, body);
          }}>
              <p><input type='text' name= 'title' placeholder='title' /> </p>
              <p><textarea name='body' placeholder='body'></textarea></p>
              <p><input type='submit' value='Create'  /> </p> 
          </form>
      </article>
  }

formラベルを使用して入力するコントロールが追加されました.

<input type='text' name= 'title' placeholder='title' />
<textarea name='body' placeholder='body'></textarea>
<input type='submit' value='Create'  />

App.js - Create 컴포넌트-ユーザー入力データの名前name-メッセージを入力します.(ヒントコンセプト)placeholderは、titleおよびbody値を転送するためのコントロールである.Createボタンを押して送信します.submitボタンをクリックすると、JSが実行する最適なタイミングは、onSubmitというpropをフォームに提供することです.
(submitをクリックしたときに発生したイベント)onSubmit

              event.preventDefault(); 
            const title = event.target.title.value; 
            const body = event.target.body.value;
            props.onCreate(title, body);
          }}>

ページの再ロードを防ぐには、submit 버튼を使用します.
イベント関数では、App.js - Create 컴포넌트 form 태그に属するevent.preventDefault()が<form>の値を取得します.nameおよびtitle과 bodyを使用した.const title = event.target.title.valueイベントが発生したことを示すフラグ.
ここで、const body = event.target.body.value;ボタンをクリックしたときに発生するイベントはevent.targetで発生するため、submitは最終的に<form>となる.
CreateコンポーネントからSubmit情報を取得するのはonCreateです.
onCreateはpropを用いてCreateコンポーネントに支柱を提供した.
このpropsコールevent.targetを介して.
この操作を実行すると、onCreateは関数を示します.

    content = <Create onCreate={(_title, _body) =>{
        }}> </Create>

が実行されます.<form>およびprops.onCreate(title, body)の値を使用すると、構成部品を作成するユーザに対して入力された_titleの値を提供できます.
次に、次のことを行います.
リストに追加するにはtopices変数に新しい要素を追加する必要があります.
したがって、まずトピックをステータスに設定します.

    const [topics, setTopics] = useState([
        { id:1, title:'html', body:'html is ...' },
        { id:2, title:'css', body:'css is ...' },
        { id:3, title:'React', body:'React is ...' },
    ]);

_body-読み取り用title과 body-トピックの置換
新しい要素を作成するには

const newTopic = {id:nextId, title:_title, body:_body}; 라는 객체를 만들어주었다.

ID値を個別に管理するために、

    const [nextId, setNextId] = useState(4);

名前のステータスが作成されました.
△4を選んだのは、3の後に数字が生成されるからです.
newTopicの追加

const newTopics = [...topics];
newTopics.push(newTopic);
setTopics(newTopics);

として
理由は.
1.配列されているので、コピーテーマのコピーを作成しました.topics2.コピーをプッシュして変更します.setTopics3.オリジナルとコピーが同じか異なるかを判断し、構成部品を再レンダリングします.const newTopics = [...topics];さらに作成する場合は、newTopics.push(newTopic);が追加され、追加された記事をsetTopics(newTopics);に指定します.
次の文章を準備するために、setMode('READ');をあげました.