ボタンをクリックして目的の構成部品をレンダリング

19502 ワード
checked react.js React radio button テキストリンク

コンポーネントをレンダーするにはReactボタンをクリックします

  • 実装画面
    • 必要な構成部品をレンダリングするには、buttonをクリックします.
    現在はボタンが使用されていますが、checkbox、radio、selectのどちらでも使用できる方法です.

    インプリメンテーション


    何かを実施するとき、まず考えなければならないのは論理だと思います.
  • ボタン
    • をクリック
  • ボタンの状態値
    • を保存する.
  • のステータス値で要素
    • をレンダーする.
    今大きく分かれていれば、このように見ることができます.

    1.ステータスの作成


    クリックしたボタンの値nameをstateに保存します.
    value、innerTextなどのコンテキストであってもよい.
    const [content, setContent] = useState();

const buttonValueSetting = e => {
    const { name } = e.target;
    setContent(name);
};

    2.オブジェクトの作成


    オブジェクトのキーは、レンダリングする構成部品としてボタンのname値と同じです.
    const selectComponent = {
    first: <First />,
    second: <Second />,
    third: <Third />,
    fourth: <Fourth />,
    fifth: <Fifth />,
  };

    3.onClickイベントの付与


    重複レイアウトはmap関数を使用してコード量を減らすことができます.
    <Container>
  {MAIN_DATA.map(data => {
  return (
  <Button
    onClick={buttonValueSetting}
    name={data.name}
    key={data.id}>
	{data.text}
  </Button>
    );
  })}
</Container>

    4.光学的フィルタリング、オブジェクトのキー変数の処理


    state値の後に&&と書き、divは[state]にオブジェクトとキーを囲む.
    {content && <div>{selectComponent[content]}</div>}
    content && <Content>...</Content>とは
    content trueの場合、<Content>がレンダリングされます.
    現在のcontentはstate値、初期値は()空、falsey値です.
    空白の画面が表示されます
  • ボタンをクリックすると、onClickイベント
    • がトリガーされます.
  • buttonValue Settingsイベントが発生した場合、ステータス値はnameとして保存されます
  • コンテンツはname値で埋め込まれ、真の値&&で
    • が実行されます.
  • オブジェクトが[content]で変数を処理するとこうなります.
    • selectComponent.first // <First />
selectComponent.second // <Second />
selectComponent.third // <Third />
.
.
1번채 버튼 클릭시
<div><First /></div>

    完全なコード

    import React, { useState } from 'react';
import styled from 'styled-components';
import { MAIN_DATA } from './MainData';
import Fifth from './Number/Fifth';
import First from './Number/First';
import Fourth from './Number/Fourth';
import Second from './Number/Second';
import Third from './Number/Third';

const Main = () => {
  const [content, setContent] = useState();

  const buttonValueSetting = e => {
    const { name } = e.target;
    setContent(name);
  };

  const selectComponent = {
    first: <First />,
    second: <Second />,
    third: <Third />,
    fourth: <Fourth />,
    fifth: <Fifth />,
  };

  console.log(content);

  return (
    <div>
      <Container>
        {MAIN_DATA.map(data => {
          return (
            <Button onClick={buttonValueSetting} name={data.name} key={data.id}>
              {data.text}
            </Button>
          );
        })}
      </Container>
      {content && <Content>{selectComponent[content]}</Content>}
    </div>
  );
};

export default Main;

const Container = styled.div`
  ${props => props.theme.flex('center', 'center')}
  height: 20vh;
`;

const Button = styled.button`
  padding: 1rem 2rem;
  margin-right: 1rem;
  color: #111111;
  background-color: #eeeeee;
  border-radius: 2rem;
`;

const Content = styled.div`
  ${props => props.theme.flex('center', 'center')}
  width: 100%;
  height: 100%;
`;
    210823,C言語入門-day 1
    [プログラマ#JS]ペアリングの削除