如何在我的React组件中组合onBlur和onFocus，而不重新选择我输入的每个字母上的文本？

Question

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

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

handleFocus就是这个e.target.select()

onBlur只是发出一个动作。 （并设置状态，使其不再显示输入）

问题是handleFocus我认为与onBlur一起它并不能很好地协同工作。

每次我输入文本字段时，只需写一个字母并重新选择该字母。所以就像onSelect运行的每次更改一样。

当我摆脱onFocus道具时，一切都按预期工作（简单的反应控制输入 - 从状态获取值，并设置状态onChange）。

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

我尝试了不同的e.preventDefaulton功能，但都没有奏效。我的意思是当我只是在文本字段中键入内容时，onBlur甚至不应该运行。但onSelect确实如此，但我只是想在最初渲染组件（输入）时运行它。

这是一个应该如何的例子：https://codesandbox.io/s/7y66ykqn2q?fontsize=14

这是回购分支：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文档。