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

我需要将基于类的组件转换为基于函数的组件 “filterText”被分配了一个值，但从未使用过没有未使用的变量 “inStockOnly”被指定了一个值，但从未使用过任何未使用的变量

无法确定我错在哪里

基于类的代码是

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，{Component}来自'React'；
类搜索栏扩展组件{
建造师（道具）{
超级（道具）；
this.handleFilterTextChange=this.handleFilterTextChange.bind（this）；
this.handleInStockChange=this.handleInStockChange.bind（this）；
}
handleFilterTextChange（e）{
this.props.onFilterTextChange（即target.value）；
}
手持式储物箱（e）{
此.props.onInStockChange（e.target.checked）；
}
render（）{
返回(

{' '}
只展示库存产品

);
}
}
导出默认搜索栏；

更改为基于功能，具体如下：

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;

import React，{useState}来自“React”；
功能搜索栏（道具）{
常量[filterText，setOnFilterTextChange]=useState（“”）；
常量[inStockOnly，setOnInStockChange]=useState（false）；
常量handleFilterTextChange=（e）=>{
setOnFilterTextChange（如target.value）；
}
常量handleInStockChange=（e）=>{
setOnInStockChange（例如，目标已选中）；
}
返回(

{' '}
只展示库存产品

);
}
导出默认搜索栏；

返回(
handleFilterTextChange（e）}
/>

handleInStockChange（e）}
/>{" "}
只展示库存产品

);

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

return(
handleFilterTextChange（e）}
/>

handleInStockChange（e）}
/>{" "}
只展示库存产品

);

---

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

我认为这比必要的要复杂得多。
您正在从这里的道具获得回调，对吗？
就用它们吧。根本不需要useState（）

功能搜索栏（道具）{
const{onFilterTextChange，onInStockChange，filterText，inStockOnly}=props；
返回(
onFilterTextChange（e.target.value）}
/>

onInStockChange（e.target.checked）}
/>
{' '}
只展示库存产品

);
}

我想你把这件事弄得太复杂了。
您正在从这里的道具获得回调，对吗？
就用它们吧。根本不需要useState（）

功能搜索栏（道具）{
const{onFilterTextChange，onInStockChange，filterText，inStockOnly}=props；
返回(
onFilterTextChange（e.target.value）}
/>

onInStockChange（e.target.checked）}
/>
{' '}
只展示库存产品

);
}

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