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

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 (

    <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>

);

无需使用 props 即可在组件内部自动访问状态。

Answer 2

我认为您使这件事变得比必要的复杂得多。

你在这里得到了道具的回调，对吧？

只需使用它们。根本不需要 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>

    );

  

}