如果我只是在提交時調用函數，應該在React中使用表單標籤嗎？

Question

我正在創建一個包含搜索結果（SearchResultsComponent）和下拉篩選器（FiltersComponent）列表的應用程序。 SearchResultsComponent根據FiltersComponent中選擇的篩選器篩選其搜索結果列表。 SearchResultsComponent保持選擇過濾器的狀態。它通過將函數傳遞給FiltersComponent（setFilters（））來完成此操作，以便可以在FiltersComponent中選擇一個過濾器，然後將過濾器保存在SearchResultsComponent狀態中。

我的問題是將FilterComponent的篩選器選擇部分包裝在表單標記中是否合理，因爲它並不真正提交任何內容，而只是選擇一個狀態並調用從其父級傳遞給它的函數。另一種方法是放棄表單標籤，而是使用apply filters按鈕調用回調。

這是它看起來像表單標籤

class FiltersComponent extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    setFilters(filters) { 
    this.props.setFilters(filters) 
    } 

    render() { 
    return(
     <form onSubmit={this.setFilters(this.state.filters)}> 
     ...inputs that let you select a filter from a list of filters... 
     <input type="submit" value="Set Filters" /> 
     </form> 
    ) 
    } 
} 

這是它的替代會是什麼樣

class FiltersComponent extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    setFilters(filters) { 
    this.props.setFilters(filters) 
    } 

    render() { 
    return(
     ...inputs that let you select a filter from a list of filters... 
     <input type="submit" value="Set Filters" onClick={this.setFilters(this.state.filters)} /> 
    ) 
    } 
} 

謝謝！

Answer 1

HTML標籤應該用於其語義含義，而不是任何內置功能。即：只有當您的網站的某個區域是表單時，您才應使用表單標記。隨着HTML的發展，它越來越強調頁面的語義，正如可以通過引入純語義標記（如<main>,<header>和<footer>）所指出的那樣。

基於此，您可以決定使用哪些標籤：只有使用form標籤，如果某件東西是表單。請勿僅爲提交功能使用form標記。您網頁上的標籤對處理網頁的代碼非常重要，例如Google Web Light。

就你而言，你應該使用回調版本。