如何在React中实现点击Button按钮修改Div及Input组件内容

现有代码问题梳理 #

• 状态更新语法错误：handleScreen方法中使用函数式更新时，没有正确声明前一次状态的形参，无法正确拼接内容
• 自定义组件逻辑缺失：Button组件内部没有绑定点击事件触发父组件传入的回调，Input组件没有正确接收props渲染内容
• 缺少展示内容的Div节点：未实现点击后Div展示内容的需求
• 存在冗余状态：result状态没有实际使用，可以移除

完整修改代码 #

1. App.js 修改 #

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

function App() {
  const [showText, setShowText] = useState("");

  const handleBtnClick = (e) => {
    // 若需要点击替换内容而非累加，删除prevText + 即可
    setShowText(prevText => prevText + e.target.name);
  }

  return (
    <div>
      <Input content={showText} />
      <Button name="1" onBtnClick={handleBtnClick} />
      {/* 需求要求的展示内容Div */}
      <div>{showText}</div>
    </div>
  );
}
export default App;

2. Button.js 调整（自定义组件需要透传属性和事件） #

export default function Button(props) {
  return (
    <button 
      name={props.name}
      onClick={props.onBtnClick}
    >
      {props.name}
    </button>
  )
}

3. Input.js 调整（接收props渲染输入框内容） #

export default function Input(props) {
  return (
    <input 
      type="text" 
      value={props.content}
      readOnly
    />
  )
}

效果说明 #

点击标注为「1」的按钮时，输入框会同步更新为对应内容，下方Div也会同步展示「1」，满足需求。

内容的提问来源于stack exchange，提问作者youngprogrammer1997