输入一个字符后，对反应输入框的关注松散答案

【问题标题】：Loose focus on react input box after one character input输入一个字符后，对反应输入框的关注松散
【发布时间】：2020-09-03 17:27:27
【问题描述】：

当我在输入框中输入一个字符时

状态随新角色更新
然后我失去了对输入框的关注

所以我一次只能修改框 1 按键

输入框嵌套在其他 4 个组件中，其中包括 1 个高阶组件（见下文）

页面组件
标头（修改）
输入表单

当我将表单代码移动到页面组件时，它可以工作。

我如何保持组件分离（和可重复使用）并具有我需要的功能？

表格代码如下

 <input
          key={props.id}
          id={props.id}
          type='text'
          value={props.currentObject.name}
          onChange={(event) => {
            userFunctions.modifyItem(
              editorState,
              props.currentObject,
              stateModifier,
              event,
              'name'
            );
          }}
        />

整个组件的完整代码在这里

mport React, { Fragment } from 'react';

const InputForm = (props) => {
  //prepare props
  console.log('currentObject', props.currentObject);
  const { editorState, stateModifier, userFunctions } = props.editorEssentials;

  // const urlFormVisible = props.urlFormVisible;

  //Styles
  const componentStyle = 'container-flex-column';

  // console.log('MOdify: currentState', editorState);
  // console.log('MOdify: targetObject', currentObject);
  // console.log('MOdify: stateModifier', stateModifier);
  console.log('currentObject.name', props.currentObject.name);
  return (
    <Fragment>
      <form
        className={componentStyle}
        // onSubmit={(event) =>
        //   userFunctions.submitItem(editorState, currentObject, stateModifier, event)
        // }
      >
        <input
          key={props.id}
          id={props.id}
          type='text'
          value={props.currentObject.name}
          onChange={(event) => {
            userFunctions.modifyItem(
              editorState,
              props.currentObject,
              stateModifier,
              event,
              'name'
            );
          }}
        />
        {props.urlFormVisible && (
          <input
            type='url'
            value={props.currentObject.url}
            onChange={(event) =>
              userFunctions.modifyItem(
                editorState,
                props.currentObject,
                stateModifier,
                event,
                'url'
              )
            }
          />
        )}
      </form>
    </Fragment>
  );
};

export default InputForm;

函数对状态进行操作，绑定在主组件中

我已经尝试过什么
有一些关于堆栈溢出的类似帖子，但它们似乎没有回答我的问题。

更改了输入中的 Key 值（尽管我的原始版本没有定义 ket）
仔细检查了 modifyItem 函数是否绑定正确 - 看起来是这样，我猜如果不是，状态根本不会更新
尝试简化代码以减少运行所需的函数数量

移动代码生成的组件

【问题讨论】：

标签： javascript reactjs forms input

【解决方案1】：

我不知道为什么，但高阶组件是问题

当我更改配置时

页面组件标头(修改) 输入表单

到页面组件标题调整输入表格 /标题

成功了

任何想法为什么我会遇到这个问题？

【讨论】：