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

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

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

<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

提前谢谢大家!

好的,我修好了。 错误来自 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 文档。