Блог

Мне нужно иметь возможность получать выходное значение в новое поле ввода при нажатии кнопки, и я не понимаю, как этого добиться. Я довольно новичок в React и использую функциональные компоненты с реактивными перехватами, такими как useState.

Я не уверен, как написать функцию handleClick, чтобы при нажатии кнопки новый компонент ввода мог иметь значение, которое было вычислено и отображено в выходном компоненте.

Пока это мой базовый код:

 import React, {useState} from 'react';
import Output from "./Output.js"

export default function Calculator() {
  const [number1, setNumber1] = useState (0); 
  const [number2, setNumber2] = useState (0); 


  return (
    <div>

      <input id="first-number" value={number1} type="number" onChange={e => setNumber1( e.target.value)}/>
      <input id="second-number" value={number2} type="number" onChange={e => setNumber2( e.target.value)}/>

      <Output value={number1 number2}/>


      <button onClick={handleClick}>Click Here</button>

      <input id="new-input" />

    </div>
  )
}
 

Мой выходной компонент:

 import React from "react";

const Output = (props) => {
  return (
   <div className="outpout-box">
    {props.value}
   </div>
  )
}
 

Вы можете использовать другое состояние, например result :

 export default function Calculator() {
  const [number1, setNumber1] = useState (0); 
  const [number2, setNumber2] = useState (0); 
  const [result, setResult] = useState(number1   number2);

  const handleClick = event => {
    setResult(number1   number2)
  }

  return (
    <div>

      <input id="first-number" value={number1} type="number" onChange={e => setNumber1( e.target.value)}/>
      <input id="second-number" value={number2} type="number" onChange={e => setNumber2( e.target.value)}/>

      <Output value={result}/>


      <button onClick={handleClick}>Click Here</button>

      <input id="new-input" />

    </div>
  )
}