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 input元素。它根本没有value属性。当您删除styled方面并仅渲染<input />时，它开始工作的原因是ref是具有value属性的实际HTML输入元素。尝试将ref记录在change事件中，首先查看样式化组件，然后查看标准输入。无论哪种方式，我都尝试使用value属性和event.target.value将其作为Controlled Component来处理，而不是尝试从引用中提取值。

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来访问基础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} ... />

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

2 个答案: