Как получить значение input (StyledComponent) по ref

Question

Я пытаюсь установить ссылку для стилизованных компонентов.

Компонент был создан с помощью const Input = styled.input. но я не могу получить значение ввода по ссылке.

Мой код:

const _Input = styled.input`
  background-image: linear-gradient(#20aee3, #20aee3), linear-gradient(#bfbfbf, #bfbfbf);
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
  float: none;
  background-color: transparent;
  background-position: center bottom, center calc(100% - 1px);
  background-repeat: no-repeat;
  background-size: 0 2px, 100% 1px;
  padding: 0;
  transition: background 0s ease-out 0s;
  color: #bfbfbf;
  min-height: 35px;
  display: initial;
  width: 100%;
  outline: none;
  font-size: 15px;
  &:focus {
      background-size: 100% 2px, 100% 1px;
      outline: 0 none;
      transition-duration: 0.3s;
      color: #525252;
    }
`;

...
<_Input type='text' ref="name" placeholder="name .."/>

Answer 1

Хорошо, я думаю, что понял. Вы не можете получить ссылку из стилизованного компонента. Вам нужно передать ему какой-то параметр, а затем передать его как ref компоненту, который вы используете. Вы можете посмотреть на эту ссылку, например: https://github.com/styled-components/styled-components/issues/1151

Answer 2

Вам нужно использовать

innerRef = "имя"

Для стилизованного компонента ref работать не будет, вместо этого вы должны использовать innerRef. Для получения дополнительной информации ссылка на ссылку приведена ниже.

https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md