Блог

Я пытаюсь изменить содержимое моего Div так, чтобы при нажатии на кнопку оно обновляло содержимое компонента ввода. В этом сценарии я хочу нажать кнопку 1 и отобразить 1 внутри div.

 import "./styles.css";
import Button from "./Button.js";
import Input from "./Input.js";
import {useState} from "react";



function App() {

  const [text, setText] = useState(" ");
  const [result, setResult] = useState(" ");

  const handleScreen = (e) => {
    setText((text)   e.target.name)
  }


  return (
    <div>
      <Input results = {text} numbers = {result} > </Input>
      <Button name = "1" handleText = {handleScreen}> </Button>

    </div>
  );
}
export default App; 

Существует прослушиватель событий по умолчанию, который ReactJS предоставляет для обработки событий щелчка, а именно onClick

Ваш код будет более или менее таким:

 import "./styles.css";
import Button from "./Button.js";
import Input from "./Input.js";
import {useState} from "react";



function App() {

  const [text, setText] = useState(" ");
  const [result, setResult] = useState(" ");

  const handleClick = (e) => {
    setText((text)   e.target.name)
  }


  return (
    <div>
      <Input results = {text} numbers = {result} > </Input>
      <Button name = "1" onClick = {handleClick}> </Button>

    </div>
  );
}
export default App;