React.js中如何让自定义数字按钮对应正确的动态输入框

问题分析 #

当前所有动态生成的输入框共用同一个numberButtonClicked状态数组，导致点击数字按钮时所有输入框同步显示内容。核心问题是没有区分当前激活的输入框，也没有为每个输入框维护独立的输入值。

解决方案 #

1. 调整父组件的状态结构 #

将单一数组状态改为记录每个输入框值的对象，同时新增状态跟踪当前激活的输入框ID：

// 替换父组件中原有的numberButtonClicked状态
const [inputValues, setInputValues] = useState({});
const [activeInputId, setActiveInputId] = useState(null);

2. 更新数字按钮的点击处理逻辑 #

修改getButtonValue函数，仅更新当前激活输入框的对应值：

const getButtonValue = (e) => {
  if (!activeInputId) return; // 无激活输入框时不执行
  const clickedNumber = e.target.value;
  setInputValues(prev => ({
    ...prev,
    [activeInputId]: (prev[activeInputId] || "") + clickedNumber
  }));
};

3. 给输入框添加激活标记 #

在渲染Element组件时，新增激活回调函数，点击/聚焦输入框时更新当前激活ID：

{Object.entries(elements).map((element, i) => {
  const { fields } = element[1];
  if (fields) {
    return (
      <Element
        key={i}
        field={fields[0]}
        id={i}
        useReff={`answer${i}`}
        currentValue={inputValues[i] || ""}
        onActivate={() => setActiveInputId(i)} // 新增激活回调
      />
    );
  } else {
    return null;
  }
})}

4. 调整Element组件的交互逻辑 #

在Element组件内部，给输入区域绑定点击/聚焦事件，触发激活回调：

// Element组件示例（根据实际输入容器调整）
function Element({ id, currentValue, onActivate }) {
  return (
    <div 
      className="input-area"
      onClick={onActivate}
      onFocus={onActivate}
    >
      {currentValue || '请输入'}
    </div>
  );
}

可选：添加输入清除功能 #

如果需要清除单个输入框内容，可在父组件新增清除函数并传递给Element：

const clearInput = (inputId) => {
  setInputValues(prev => ({
    ...prev,
    [inputId]: ""
  }));
};

修改后的父组件完整代码片段 #

import { useState } from 'react';
import Carousel from '你的Carousel组件路径';
import Element from '你的Element组件路径';
import { FormContext } from "../../lib/FormContext";

function ParentComponent({ elements }) {
  const [inputValues, setInputValues] = useState({});
  const [activeInputId, setActiveInputId] = useState(null);

  const getButtonValue = (e) => {
    if (!activeInputId) return;
    const clickedNumber = e.target.value;
    setInputValues(prev => ({
      ...prev,
      [activeInputId]: (prev[activeInputId] || "") + clickedNumber
    }));
  };

  return (
    <FormContext.Provider value={{ getButtonValue }}>
      <Carousel>
        <div style={{ height: "100%" }}>
          {Object.entries(elements).map((element, i) => {
            const { fields } = element[1];
            if (fields) {
              return (
                <Element
                  key={i}
                  field={fields[0]}
                  id={i}
                  useReff={`answer${i}`}
                  currentValue={inputValues[i] || ""}
                  onActivate={() => setActiveInputId(i)}
                />
              );
            } else {
              return null;
            }
          })}
        </div>
      </Carousel>
    </FormContext.Provider>
  );
}

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