Question

当我在输入框中输入字符

状态更新为新字符
然后我将注意力集中在输入框

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

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

页面组件
标头（修改）
InputForm

将表单代码移动到Page组件时，它可以工作。

我如何使组件分开（并且可重复使用）并具有所需的功能？

表单代码在下面

 <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函数是否正确绑定-看起来像是，我猜是否不是状态根本不会更新
尝试简化代码以减少运行所需的功能

移动组件的代码已制成

Answer 1

我不确定为什么会出现问题，但是高阶部分是问题

当我从中更改配置时

页面组件标头（修改） InputForm

到页面组件标头修改输入表格 / header

有效

我为什么会有这个问题的任何想法？

输入一个字符后，将焦点集中在反应输入框上

1 个答案: