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等网页的代码非常重要。

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

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

1 个答案: