javascript - 如何在我的 React 组件中组合 onBlur 和 onFocus 而无需重新选择我输入的每个字母的文本？

Question

我有一个简单的文本输入，如下所示:

<input
    type="text"
    value={listTitle}
    onChange={handleChange}
    autoFocus
    onFocus={handleFocus}
    onBlur={handleFinishEditing}
/>

handleFocus 就是这样做的 e.target.select()

onBlur 只是分派(dispatch)一个 Action 。 (并设置状态，使其不再显示输入)

问题出在 handleFocus 上，我认为它与 onBlur 不能很好地协同工作。

每次我在文本字段中键入它只是写一个字母并重新选择该字母。所以就像每次更改时都会运行 onSelect。

当我摆脱 onFocus Prop 时，一切都按预期工作(简单的 react 控制输入 - 它从状态获取值，并将状态设置为 onChange)。

为什么会发生这种情况，我该如何预防？

我在函数上尝试了不同的 e.preventDefault 但都没有用。我的意思是，当我只是在文本字段中输入内容时，onBlur 甚至不应该运行。但是 onSelect 确实如此，但我只想在组件(输入)最初呈现时运行它。

下面是一个示例:https://codesandbox.io/s/7y66ykqn2q?fontsize=14

这是 repo 分支:CRUD:https://github.com/SelfDevTV/trello-clone/tree/CRUD

这是我在 github 上使用的相同代码，但在 Codesandbox 中使用:https://codesandbox.io/s/q3o7zjjjqw

提前致谢各位!

Answer 1

好的，伙计们，我修好了。 错误来自styled-components该错误与文档的这一部分有关:

https://www.styled-components.com/docs/basics#coming-from-css

“在渲染方法之外定义样式化组件”

起初组件看起来像这样:

const TrelloList = ({ title, cards, listID, index, dispatch }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [listTitle, setListTitle] = useState(title);



  const StyledInput = styled.input`
  width: 100%;
  border: none;
  outline-color: blue;
  border-radius: 3px;
  margin-bottom: 3px;
  padding: 5px;
`;

  const renderEditInput = () => {
    return (
      <StyledInput
        type="text"
        value={listTitle}
        onChange={handleChange}
        autoFocus
        onFocus={handleFocus}
        onBlur={handleFinishEditing}
      />
    );
  };

  // other stuff

现在我把它改成这样:

const StyledInput = styled.input`
  width: 100%;
  border: none;
  outline-color: blue;
  border-radius: 3px;
  margin-bottom: 3px;
  padding: 5px;
`;

const TrelloList = ({ title, cards, listID, index, dispatch }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [listTitle, setListTitle] = useState(title);



  const renderEditInput = () => {
    return (
      <StyledInput
        type="text"
        value={listTitle}
        onChange={handleChange}
        autoFocus
        onFocus={handleFocus}
        onBlur={handleFinishEditing}
      />
    );
  };

  // other stuff

这完全解决了问题，因此节点不会在每次重新渲染时被删除。所以这是我的错，我应该更深入地阅读 styled-components 文档。