如何让自定义数字按钮显示在正确的输入字段 react.js答案

【问题标题】：How to get custom number buttons to show on correct input field react.js如何让自定义数字按钮显示在正确的输入字段 react.js
【发布时间】：2022-09-23 01:08:22
【问题描述】：

很难看到我如何做到这一点。我创建了一些 0-9 的自定义数字按钮，用户可以点击而不是使用键盘。我遇到的问题是我有多个动态创建的输入字段，具体取决于 JSON 数据，所以假设有 10 个动态创建的输入字段，用户从第一个问题开始，然后用户使用我创建的自定义数字按钮并单击数字“145”回答第一个问题，但结果是所有 10 个输入都具有相同的数字“145”，而不是用户试图解决的问题。我正在使用上下文 API 来保存在名为 getButtonValue 的函数上键入的值，然后我调用父组件并将值保存在状态数组中，所以我知道我的问题是所有输入共享相同的状态数组，但我如何确保用户点击的正确输入只接收这些值。

提前致谢。

我的自定义数字按钮组件：

import { FormContext } from \"../../lib/FormContext\";

function ActivityBar() {
  const { getButtonValue } = useContext(FormContext);

  return (
    <div className={`${activity.activity__workSheet__numberButton}`}>
      <button value={0} onFocus={(e) => getButtonValue(e)}>
        <img
          className={`${activity.activity__workSheet__img0}`}
          src={\"/assets/activityNumber-btn.png\"}
          alt=\"activity number button\"
        />
    .... more code

父组件：

const [numberButtonClicked, setNumberButtonClicked] = useState([]);

常量 getButtonValue = (e) => {

setNumberButtonClicked((prevButtonClicked) => [
  ...prevButtonClicked,
  e?.target?.attributes[0].value
]);

};

  return (
    <Carousel>
       <div ref={imageRef} 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={
                      numberButtonClicked === \"\" ? null : numberButtonClicked.join(\"\")
                    }
                  />
                );
              } else {
               return;
             }
           })}
        </div>
     </Carousel>

您需要解决的一个问题是：当用户单击一个数字按钮时，您如何知道他们希望该数字进入哪个输入字段？您的代码存在的一个问题是您正在创建的每个 <Element> 事物都设置为相同的 currentValue。
正确的！是的，这就是我想要弄清楚的，我如何区分不同的输入与 currentValue。
尝试为每个输入字段使用单独的变量，而不是为所有输入使用相同的值。

标签： javascript reactjs next.js

【解决方案1】：

为这种情况找到了一个很好的工作版本，我所做的是。

我的输入标签上有一个 onFocus 方法，该方法接收事件并调用“handleChange(e)”函数，然后在该函数中，我使用 e?.target?.attributes[0]? 将 currentInputId 保存在一个变量中？ .value 和状态变量中的前一个 InputId 并检查是否前一个 InputId === 到 currentId 用户刚刚关注，如果是，那么我们将添加下一个用户点击的数字到相同的字段，否则如果 previousInputId ！== currentInputId 然后让我的用户值状态数组为空，setNumberButtonClicked([])。

【讨论】：