Javascript 在输入一个字符后，将焦点放在react输入框上

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

状态将使用新字符更新

然后我将焦点放在输入框上

所以我一次只能修改box 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'
            );
          }}
        />

{
userFunctions.modifyItem(
编辑状态，
props.currentObject，
状态修饰符，
事件
“姓名”
);
}}
/>

Enture组件的完整代码在这里

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;

mport-React，{Fragment}来自'React'；
常量输入形式=（道具）=>{
//准备道具
console.log（'currentObject'，props.currentObject）；
const{editorState，stateModifier，userFunctions}=props.editorEssentials；
//const urlFormVisible=props.urlFormVisible；
//风格
const componentStyle='container flex column'；
//log（'MOdify:currentState'，editorState）；
//log（'MOdify:targetObject'，currentObject'）；
//log（'MOdify:stateModifier'，stateModifier'）；
console.log（'currentObject.name'，props.currentObject.name）；
返回(
//submitItem（editorState、currentObject、stateModifier、事件）
// }
>
{
userFunctions.modifyItem(
编辑状态，
props.currentObject，
状态修饰符，
事件
“姓名”
);
}}
/>
{props.urlFormVisible&&(
userFunctions.modifyItem(
编辑状态，
props.currentObject，
状态修饰符，
事件
“url”
)
}
/>
)}
);
};
导出默认输入格式；

该函数在状态下运行，并绑定在主组件中

我所尝试的
有一些关于堆栈溢出的类似帖子，但它们似乎不能回答我的问题

更改了输入中的键值（尽管我的原始版本中没有定义ket）

仔细检查modifyItem函数是否绑定正确-看起来是这样，我猜如果不是，状态将根本不会更新

尝试简化代码以减少运行所需的函数数

---

移动代码生成的组件

我不确定原因，但高阶组件是问题所在

当我从

页面组件 标题（修改） 输入形式

到 页面组件 标题 修改 输入形式 /标题

它起作用了

你知道我为什么会有这个问题吗