React项目：解决输入框无法编辑及随机名预加载问题

问题1：输入框无法编辑 #

原因：输入框是受控组件，但仅绑定了value属性，未处理onChange事件，用户输入无法同步到状态，因此无法编辑。

问题2：页面加载时自动生成名字 #

原因：nameByRace("elf", { gender: "male" })直接写在组件函数顶层，组件每次渲染（含首次加载）都会执行这段代码，导致页面一加载就生成名字。

修改后的代码 #

1. TopSection 组件

添加onChange属性，让输入框能响应用户输入并同步父组件状态：

import React from "react"

export default function TopSection(props) {
    return (
          <div className="col text-center">
            <input 
                className="form-control" 
                value={props.value}
                onChange={props.onChange}
            />
            <label>{props.label}</label>
          </div>
    )
}

2. App 组件

• 将名字生成逻辑移至点击事件，确保仅点击按钮时生成新名字
• 绑定输入框状态与onChange事件，实现输入框可编辑

import React from "react"
import TopSection from "./TopSection"

function App() {
  const [characterName, setCharacterName] = React.useState("")

  const handleClick = () => {
    const newElfName = nameByRace("elf", { gender: "male" })
    setCharacterName(newElfName)
  }

  const handleNameChange = (e) => {
    setCharacterName(e.target.value)
  }

  return (
    <div className="App ">
      <div className="container-flex">
        <div className="row mb-4 gx-3" style={{ margin: "auto" }}>
          <div className="col-12 col-lg-2 bg-light border border-danger rounded mr-3 ">
            <img src={DnDLogo} alt="dnd-logo" className="dndlogo" />

            <TopSection 
                label="CHARACTER NAME"  
                value={characterName}
                onChange={handleNameChange}
            />
            <a href="#" className="link-danger" onClick={handleClick}>
              Randomize 🎲!
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

关键修改说明 #

• 将nameByRace调用移到handleClick函数内，避免页面加载时自动执行
• 给输入框添加onChange事件，把用户输入同步到characterName状态，让输入框变为可编辑的受控组件
• 子组件TopSection通过接收value和onChange属性，实现父子组件的状态同步

内容的提问来源于stack exchange，提问作者Walid Daniel Dib