React中如何从多按钮模态框返回值至模拟输入框？

嘿，我来帮你搞定React里这个模态框值回传的问题！先对齐下需求：你要实现点击模拟输入框弹出模态框，选中选项后把对应值回显到输入框里，就像你用Promise实现的原生JS效果对吧？

你的原生JS示例里，通过Promise把模态框选中的值传递到了结果区域；现在React代码里已经有了FakeInputField（模拟输入框）、Modal（模态框）和UnitBlock（选项块），核心问题是怎么把UnitBlock的点击值传递给FakeInputField。

你的现有React代码 #

function Modal(){
  return (
    <div>
      <div>
        <UnitBlock name="1" />
        <UnitBlock name="2" />
        <UnitBlock name="3" />
        <UnitBlock name="4" />
        <UnitBlock name="5" />
      </div>
      <div>
        <UnitBlock name="Little" />
        <UnitBlock name="A lot" />
        <UnitBlock name="A few" />
      </div>
    </div>
  )
}

function UnitBlock(props) {
  return <div className="UnitBlock">{props.name}</div>
}

function FakeInputField(props){
  return <div className="FakeInputField">{props.name}</div>
}

function example(){
  return(
    <div>
      <FakeInputField name="Amount"/>
      <Modal/>
    </div>
  )
}

React里组件间的数据传递，最直接的方式就是状态提升——把共享的状态放在共同的父组件里，然后通过回调函数把子组件的事件传递给父组件，再更新状态同步给需要的子组件。

下面是修改后的完整代码，我会标注关键改动：

import { useState } from 'react'; // 记得导入useState钩子

function Modal({ onSelect }) { 
  // 接收父组件传来的回调函数，用于传递选中的值
  return (
    <div>
      <div>
        {/* 把回调函数传递给每个UnitBlock */}
        <UnitBlock name="1" onSelect={onSelect} />
        <UnitBlock name="2" onSelect={onSelect} />
        <UnitBlock name="3" onSelect={onSelect} />
        <UnitBlock name="4" onSelect={onSelect} />
        <UnitBlock name="5" onSelect={onSelect} />
      </div>
      <div>
        <UnitBlock name="Little" onSelect={onSelect} />
        <UnitBlock name="A lot" onSelect={onSelect} />
        <UnitBlock name="A few" onSelect={onSelect} />
      </div>
    </div>
  )
}

function UnitBlock({ name, onSelect }) {
  // 点击选项块时，调用回调函数把当前name传递回去
  const handleClick = () => {
    onSelect(name);
  };

  return <div className="UnitBlock" onClick={handleClick}>{name}</div>
}

function FakeInputField({ selectedValue, onOpenModal }) {
  // 点击模拟输入框时，触发打开模态框的逻辑
  // 显示选中值，没有选中时显示默认的"Amount"
  return (
    <div className="FakeInputField" onClick={onOpenModal}>
      {selectedValue || "Amount"}
    </div>
  )
}

function Example() {
  // 父组件管理两个核心状态：选中的值、模态框是否显示
  const [selectedValue, setSelectedValue] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 处理选中事件：更新选中值，同时关闭模态框
  const handleSelect = (value) => {
    setSelectedValue(value);
    setIsModalOpen(false);
  };

  // 处理打开模态框的逻辑
  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  return (
    <div>
      {/* 把选中值和打开模态框的回调传给输入框 */}
      <FakeInputField 
        selectedValue={selectedValue} 
        onOpenModal={handleOpenModal} 
      />
      {/* 根据isModalOpen状态控制模态框的显示/隐藏 */}
      {isModalOpen && <Modal onSelect={handleSelect} />}
    </div>
  )
}

export default Example;

关键逻辑说明 #

1. 状态提升：把selectedValue（选中的值）和isModalOpen（模态框显示状态）放在共同的父组件Example里，这样两个子组件都能访问到这些状态。
2. 回调传递：父组件定义handleSelect回调，传给Modal，Modal再把这个回调传给每个UnitBlock；当用户点击UnitBlock时，就会触发这个回调，把选中的name传递给父组件。
3. 状态同步：父组件更新selectedValue后，会把这个值传给FakeInputField，输入框就会自动更新显示选中的内容。
4. 模态框控制：通过isModalOpen状态来决定是否渲染Modal组件，点击输入框时打开，选中选项后自动关闭。

如果需要给模态框加遮罩层、动画效果，只需要在Modal组件外层套一个带样式的容器，配合isModalOpen状态做CSS切换就可以了，核心的数据传递逻辑不变。

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