Состояния не изменяются при использовании стилизованных компонентов в React

Question

Я пытаюсь реализовать панель поиска при использовании библиотеки стилей для компонентов. Моя проблема в том, что запрашиваемое значение никогда не меняется, если я использовал styled-компоненты. Это мой код

import styled from 'styled-components'
import React, from 'react'

const SearchBar = styled.input`
  margin-top: 35px;
  float: right;
`

class Header extends React.Component {
  state = {
    query: '',
  }

  handleNewQuery = () => {
    this.setState({
      query: this.search.value,
    })
    console.log(this.search.value);
  }

  render () {
    return (
      <SearchBar
        placeholder='Search for...'
        ref={input => this.search = input}
        onChange={this.handleNewQuery}
      />
    )
  }
}

Что работает, только если я поменяю SearchBar на ввод, в противном случае журнал печатает неопределенный

Answer 1

SearchBar должен взять value реквизит вместо использования ref для получения значения. Примерно так:

<SearchBar value={this.state.search} ... />

Answer 2

Основная проблема заключается в том, что создаваемая ссылка возвращает StyledComponent, а не элемент ввода HTML. У него просто нет свойства value. Причина, по которой он начинает работать, когда вы удаляете аспект styled и просто визуализируете <input />, заключается в том, что ссылка является фактическим элементом ввода HTML со свойством value. Попробуйте зарегистрировать ссылку в событии изменения, чтобы увидеть это сначала с помощью стилизованного компонента, а затем стандартного ввода. В любом случае я бы попытался приблизиться к нему как к Контролируемому Компоненту , используя свойство value и event.target.value вместо попытки извлечь значение из ссылки.

import React, { Component } from 'react';
import styled from 'styled-components';
import './style.css';

const SearchBar = styled.input`
  margin-top: 35px;
  float: right;
`;

class Header extends Component {
  constructor() {
    super();

    this.state = {
      query: ''
    };
  }

  handleNewQuery = (e) => {
    this.setState({
      query: e.target.value
    })
  }

  render() {
    return (
      <div>
        <SearchBar
          placeholder='Search for...'
          onChange={this.handleNewQuery}
          value={this.state.query}
        />
      </div>
    );
  }
}

Если вам абсолютно необходимо использовать ссылку с этим стилевым компонентом. Вы можете использовать свойство innerRef , характерное для стилевых компонентов, для доступа к базовому элементу ввода HTML. Технически это даст вам доступ к свойству value. Еще раз, однако, лучший подход будет просто использовать контролируемый компонент, как описано выше. В приведенном ниже примере используется более новый подход к созданию refs , но это будет зависеть от используемой версии React.

<SearchBar
  placeholder='Search for...'
  onChange={this.handleNewQuery}
  value={this.state.query}
  innerRef={this.search}
/> 

Вот StackBlitz , показывающий функциональность в действии, включая innerRef.

Надеюсь, это поможет!