Как я могу объединить onBlur и onFocus в моем React Component без повторного выбора текста на каждой вводимой букве? - PullRequest
Новая
       32

Как я могу объединить onBlur и onFocus в моем React Component без повторного выбора текста на каждой вводимой букве?

1 голос
/ 25 марта 2019

У меня есть простой текстовый ввод, который выглядит так: 

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

handleFocus делает именно это e.target.select()

onBlur просто отправляет действие. (и устанавливает состояние, чтобы оно больше не отображало ввод)

Проблема в handleFocus Я думаю, что вместе с onBlur это не совсем хорошо работает вместе.

Каждый раз, когда я набираю текстовое поле, он просто пишет одну букву и выбирает ее заново. Таким образом, это похоже на каждое изменение, запускаемое onSelect.

Когда я избавляюсь от опоры 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

Спасибо заранее, ребята!

1 Ответ

1 голос
/ 25 марта 2019

Хорошо, ребята, я исправил это. Ошибка произошла от 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 документов подробнее.

...