reactjs - 如果我只是在提交时调用函数，是否应该在 React 中使用表单标签？

Question

我正在创建一个包含搜索结果列表 (SearchResultsComponent) 和下拉过滤器 (FiltersComponent) 的应用程序。 SearchResultsComponent 根据在 FiltersComponent 中选择的过滤器过滤其搜索结果列表。 SearchResultsComponent 保持选择过滤器的状态。它通过将函数传递给 FiltersComponent (setFilters()) 来实现此目的，以便可以在 FiltersComponent 中选择过滤器，然后将过滤器保存在 SearchResultsComponent 状态中。

我的问题是将 FiltersComponent 的过滤器选择部分包装在表单标记中是否有意义，因为它实际上并没有提交任何内容，而只是选择一个状态并调用从其父级传递给它的函数。另一种方法是放弃表单标签，而是让应用过滤器按钮调用回调。

这是表单标签的样子

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。

在您的情况下，您应该使用回调版本。