将基于类的组件转换为基于函数的组件答案

【问题标题】：Converting class based component to function based component将基于类的组件转换为基于函数的组件
【发布时间】：2020-09-24 13:22:59
【问题描述】：

我需要将基于类的组件转换为基于函数的组件。转换此代码后，我收到编译错误 'filterText' 被分配了一个值，但从未使用过 no-unused-vars 'inStockOnly' 被分配了一个值，但从未使用过 no-unused-vars

无法确定我哪里出错了。

基于类的代码是

import React, { Component } from 'react';

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
    this.handleInStockChange = this.handleInStockChange.bind(this);
  }
  
  handleFilterTextChange(e) {
    this.props.onFilterTextChange(e.target.value);
  }
  
  handleInStockChange(e) {
    this.props.onInStockChange(e.target.checked);
  }
  
  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          onChange={this.handleFilterTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={this.props.inStockOnly}
            onChange={this.handleInStockChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }
}

export default SearchBar;

改成基于函数：

import React, { useState } from 'react';

function SearchBar(props){
  
  const [filterText,setOnFilterTextChange] = useState('');
  const [inStockOnly,setOnInStockChange] = useState(false);
      
  
  
  const handleFilterTextChange=(e)=> {
    setOnFilterTextChange(e.target.value);
  }
  
  const handleInStockChange=(e)=> {
    setOnInStockChange(e.target.checked);
  }
  
  
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={props.filterText}
          onChange={handleFilterTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={props.inStockOnly}
            onChange={handleInStockChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  
}

export default SearchBar;

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

return (
    <form>
        <input
            type="text"
            placeholder="Search..."
            value={filterText}
            onChange={(e) => handleFilterTextChange(e)}
        />
        <p>
            <input
                type="checkbox"
                checked={inStockOnly}
                onChange={(e) => handleInStockChange(e)}
            />{" "}
            Only show products in stock
        </p>
    </form>
);

可以在组件内部自动访问状态，无需使用道具。

【讨论】：

【解决方案2】：

我认为您使这变得比必要的复杂得多。
您是从这里的 props 获取回调的，对吧？
只需使用它们。根本不需要 useState()。

function SearchBar(props){
    const { onFilterTextChange, onInStockChange, filterText, inStockOnly } = props;
  
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={filterText}
          onChange={(e) => onFilterTextChange(e.target.value)}
        />
        <p>
          <input
            type="checkbox"
            checked={inStockOnly}
            onChange={(e) => onInStockChange(e.target.checked)}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  
}

【讨论】：