javascript - 在 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属性(property)。当您删除 styled 时它开始工作的原因方面并简单地渲染 <input /> ，那么 ref 是一个实际的 HTML 输入元素，带有 value属性(property)。尝试在更改事件中记录 ref，以首先使用样式组件然后使用标准输入来查看这一点。无论哪种方式，我都会尝试将其视为 Controlled Component使用value属性(property)和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属性(property)。不过，最好的方法还是使用如上所述的受控组件。下面的示例使用较新的方法来创建 refs ，但这取决于您所使用的 React 版本。

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

这是一个StackBlitz显示正在运行的功能，包括 innerRef .

希望有帮助!