在 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 与输入交换时才有效，否则日志会打印 undefined

Answer 1

基本问题是正在创建的引用返回 StyledComponent，而不是 HTML 输入元素。它根本就没有 value 属性。当您删除 styled 方面并简单地呈现 <input /> 时它开始工作的原因是 ref 是一个实际的 HTML 输入元素，带有 value 属性.尝试在更改事件中记录 ref 以首先使用样式化组件然后使用标准输入来查看它。无论哪种方式，我都会尝试使用 value 属性和 event.target.value 将其作为 Controlled Component 来处理，而不是尝试从 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>
    );
  }
}

如果您绝对必须将 ref 与此样式组件一起使用。您可以使用属性 innerRef which is specific to styled components to access the underlying HTML input element. This would technically give you access the value property. Once again though, the best approach would simply be using a controlled component as described above. The below example is using the newer approach to creating 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} ... />

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

States do not change when using styled components in React

javascript

reactjs

styled-components