CODEWITHSUNDEEP
javascriptreactjsinputref
VietUngIT
VietUngIT

Reputation: 15

How to get the input(StyledComponent) value by ref

I am trying to set the ref for a styled components.

The component has been created with const Input = styled.input. but i can't get value of input by ref.

My code :

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 .."/>

Upvotes: 0

Views: 335

Answers (2)

Himanshu Gupta
Himanshu Gupta

Reputation: 430

You need to use

innerRef="name"

For styled component ref will not work instead you have to use innerRef.

Upvotes: 1

Leo Odishvili
Leo Odishvili

Reputation: 1042

Okay, I think I got it. You can't get ref from styled component. You need to pass some parameter to it and then pass it to as ref to Component which you are using. You can look up to this link for example: https://github.com/styled-components/styled-components/issues/1151

Upvotes: 0

Related Questions