在React中使用样式化组件时，状态不会更改

Question

我正在尝试使用样式化组件库进行样式设置时实现搜索栏。我的问题是，如果我使用样式组件，查询的值永远不会改变。这是我的代码

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

基本问题是正在创建的ref返回StyledComponent，而不是HTML输入元素。它根本没有value属性。当你删除styled方面并简单地渲染<input />时它开始工作的原因是ref是一个具有value属性的实际HTML输入元素。尝试在change事件中记录ref，首先看样式组件然后是标准输入。无论哪种方式，我尝试使用Controlled Component属性和value作为event.target.value接近它，而不是尝试从ref中提取值。

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。

希望这有帮助！

Answer 2

SearchBar应该采取value道具而不是使用ref来获得价值。像这样的东西：

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