亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將基于類的組件轉換為基于函數的組件

將基于類的組件轉換為基于函數的組件

泛舟湖上清波郎朗 2023-03-24 16:06:29
我需要將基于類的組件轉換為基于函數的組件。轉換此代碼后,我收到編譯錯誤,因為“filterText”被分配了一個值但從未使用過 no-unused-vars “inStockOnly”被分配了一個值但從未使用過 no -未使用的變量無法確定我哪里出錯了?;陬惖拇a是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;
查看完整描述

2 回答

?
四季花海

TA貢獻1811條經驗 獲得超5個贊

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 即可在組件內部自動訪問狀態。


查看完整回答
反對 回復 2023-03-24
?
嚕嚕噠

TA貢獻1784條經驗 獲得超7個贊

我認為您使這件事變得比必要的復雜得多。

你在這里得到了道具的回調,對吧?

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

    );

  

}


查看完整回答
反對 回復 2023-03-24
  • 2 回答
  • 0 關注
  • 177 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號