⚠ 면책 조항

이것은 React 구성 요소에 데이터를 전달하고 변경된 데이터를 다시 가져오는 간단한 예입니다. 더 나은 솔루션이 있으면 알려주십시오.

개요

다른 경우에는 데이터를 구성 요소에 전달하고 데이터를 다시 가져오는 것이 필요합니다. 이 간단한 예에는 두 개의 하위 구성 요소가 있습니다. 하나는 카운트의 증가 높이를 결정하는 데 사용됩니다. 다른 하나는 다른 구성 요소에서 증가한 높이로 버튼 클릭을 통해 카운트를 증가시키는 데 사용됩니다.

구현

구현은 다음과 같습니다.

App.js

App.js에는 두 개의 하위 구성요소인 CounterSteps.js 및 Button.js가 포함되어 있습니다.CounterSteps.js에서 App.js는 이벤트를 통해 증가 높이를 가져와 counterSteps 상태에 저장합니다. counterSteps 값이 Button.js로 전달됩니다. 버튼을 누를 때마다 App.js 값을 다시 가져옵니다.

import React, { useState } from "react";
import CounterSteps from "./CounterSteps";
import Button from "./Button";
import "./style.css";

export default function App() {
  const [counterSteps, setCounterSteps] = useState(0);
  const [count, setCount] = useState(0);

  const handleCurrentInput = currentInput => {
    setCounterSteps(currentInput);
  };

  const handleCounterIncreased = counterSteps => {
    const newCount = count + parseInt(counterSteps);
    setCount(newCount);
  };

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>current counterStepsInput: {counterSteps}</p>
      <p>current count: {count}</p>
      <CounterSteps onCurrentInput={handleCurrentInput} />
      <Button
        counterSteps={counterSteps}
        onCounterIncreased={handleCounterIncreased}
      />
    </div>
  );
}

CounterSteps.js

CounterSteps.js는 입력 필드입니다. 값의 모든 변경 사항은 이벤트를 통해 부모 구성 요소로 전달됩니다.

import React, { useState } from "react";
import PropTypes from "prop-types";
import "./style.css";

export default function CounterSteps(props) {
  const [count, setCount] = useState(0);
  const { onCurrentInput } = props;

  const handleInput = event => {
    onCurrentInput(event.target.value);
  };

  return (
    <div>
      <p>
        <input
          type="number"
          name="counterSteps"
          placeholder="counterSteps"
          onKeyDown={e => /[\+\-\.\,]$/.test(e.key) && e.preventDefault()}
          onInput={handleInput}
        />
      </p>
    </div>
  );
}

CounterSteps.propTypes = {
  onCurrentInput: PropTypes.func
};

Button.js

Button.js는 상위 구성 요소에서 증가 높이를 받습니다. 버튼 클릭은 이벤트를 호출하고 증가 높이를 다시 전달합니다. App.js에서 총 개수가 계산됩니다.

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import "./style.css";

export default function Button(props) {
  const [counterSteps, setCounterSteps] = useState(0);
  const { onCounterIncreased } = props;

  useEffect(() => {
    setCounterSteps(props.counterSteps);
  }, [props]);

  const increaseCount = () => {
    onCounterIncreased(counterSteps);
  };

  return (
    <div>
      <button onClick={increaseCount}>increase counter</button>
    </div>
  );
}

Button.propTypes = {
  onCounterIncreased: PropTypes.func
};

결과

코딩

GitHub 또는 StackBlitz의 코딩을 참조하십시오.

JohannesKonings / 예-반응-구성 요소-소품-이벤트

StackBlitz ⚡️로 생성

예-반응-구성 요소-소품-이벤트

Edit on StackBlitz ⚡️

설명

https://johanneskonings.dev/react/2020/08/31/example_react_component_props_events/


View on GitHub