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

Question

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

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

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

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

问题出在 handleFocus 我认为与 onBlur 一起使用效果不太好。

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

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

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

我尝试了不同的 e.preventDefault 功能，但都没有用。我的意思是，当我只是在文本字段中输入内容时，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

"Define Styled Components outside of the render method"

起初组件看起来像这样：

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 文档。

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

How can I combine onBlur and onFocus in my React Component without reselecting the text on every letter I type in?

javascript

reactjs

onblur

onfocus