[react] I want to change the number by passing the value through props.

I'd like to change the number value below when I click each button on the same screen as above. The function you want to implement is to change the changeAmount value by reading the changeAmount value in the changeValue() function. But I don't know where to put the changeValue function... If you put it inside the App component, you cannot find props.changeAmount, and if you put it inside the Btn component, you cannot find the changeValue function itself. Eventually

const changeValueSM = () => setMyNum((cur)=> cur - 5);
        const changeValueM = () => setMyNum((cur)=> cur - 1);
        const changeValueP = () => setMyNum((cur)=> cur + 1);
        const changeValueSP = () => setMyNum((cur)=> cur + 5);

        return(
            <div>
                <Btn text="Super Minus(-5)" className="mgR10" onClick={changeValueSM} />
                <Btn text="Minus(-1)" className="mgR10" onClick={changeValueM} />
                <Btn text="Plus(+1)" className="mgR10" onClick={changeValueP} />
                <Btn text="Super Plus(+5)" onClick={changeValueSP} />
                <br />
                <span>{myNum}</span>
            </div>
        )

We compromised by creating different functions in this way.crying I'd appreciate it if you could tell me how to fix it. Below is the original error code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- add React -->
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <!-- add React-dom: Replace reaction element with HTML -->
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <!-- add label: The role of converting JSX grammar so that the browser can understand it (convert it like an annotation)-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- Role to specify type in props -->
    <script src="https://unpkg.com/[email protected]/prop-types.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>

<script type="text/babel">
    const root = document.getElementById('root');

    /* Button Components */
    function Btn(props) {
        /* Function that changes the value of span */
        const changeValue = () => setMyNum((cur)=> cur + {props.changeAmount});

        return(
            <button className={props.className} onClick={props.onClick}>{props.text}</button>
        )
    }

    /* App Components */
    function App(){
        const [myNum, setMyNum] = React.useState(50);

        return(
            <div>
                <Btn text="Super Minus(-5)" className="mgR10" changeAmount={-5} onClick={changeValue} />
                <Btn text="Minus(-1)" className="mgR10" changeAmount={-1} onClick={changeValue} />
                <Btn text="Plus(+1)" className="mgR10" changeAmount={1} onClick={changeValue} />
                <Btn text="Super Plus(+5)" changeAmount={5} onClick={changeValue} />
                <br />
                <span>{myNum}</span>
            </div>
        )
    };

    ReactDOM.render(<App />, root);
</script>

</html>

react javascript

2022-09-20 11:06

1 Answers

I don't know if it's the right way, but it goes like this:

<script type="text/babel">
  const root = document.getElementById('root');

  /* Button Components */
  function Btn(props) {
    console.log('Btn props: ', props);

    const changeValue = function() {
      props.setMyNum((cur) => cur + props.changeAmount);
    }

    return(
      <button className={props.className} onClick={props.onClick} onClick={changeValue}>{props.text}</button>
    )
  }

  /* App Components */
  function App(){
    const [myNum, setMyNum] = React.useState(50);

    return(
      <div>
        <Btn text="Super Minus(-5)" className="mgR10" changeAmount={-5} setMyNum={setMyNum} />
        <Btn text="Minus(-1)" className="mgR10" changeAmount={-1} setMyNum={setMyNum} />
        <Btn text="Plus(+1)" className="mgR10" changeAmount={1} setMyNum={setMyNum} />
        <Btn text="Super Plus(+5)" changeAmount={5} setMyNum={setMyNum} />
        <br />
        <span>{myNum}</span>
      </div>
    )
  };

  ReactDOM.render(<App />, root);
</script>

2022-09-20 11:06

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656