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

Question

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

无法确定我哪里出错了。

基于类的代码是

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;

Answer 1

return (&nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Search..."&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={filterText}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => handleFilterTextChange(e)}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={inStockOnly}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => handleInStockChange(e)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />{" "}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Only show products in stock&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </form>);无需使用 props 即可在组件内部自动访问状态。

Answer 2

我认为您使这件事变得比必要的复杂得多。你在这里得到了道具的回调，对吧？只需使用它们。根本不需要 useState() 。function SearchBar(props){&nbsp; &nbsp; const { onFilterTextChange, onInStockChange, filterText, inStockOnly } = props;&nbsp;&nbsp;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Search..."&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={filterText}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => onFilterTextChange(e.target.value)}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={inStockOnly}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => onInStockChange(e.target.checked)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {' '}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Only show products in stock&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; );&nbsp;&nbsp;}