时间戳

首页 > 解决方案 > 如何使按钮更改 Div 的内容

reactjs - 如何使按钮更改 Div 的内容

问题描述

我正在尝试更改我的 Div 的内容，以便当我单击按钮时，它会更新 Input 组件的内容。在这种情况下，我想单击按钮 1 并让它在 div 中显示 1。

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

解决方案

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;

推荐阅读