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

我正在创建一个包含搜索结果列表（SearchResultsComponent）和下拉过滤器（FiltersComponent）的应用程序。SearchResultsComponent根据在FiltersComponent中选择的筛选器筛选其搜索结果列表。SearchResultsComponent保留选定筛选器的状态。它通过向FiltersComponent（setFilters（））传递一个函数来实现这一点，这样就可以在FiltersComponent中选择一个过滤器，然后将过滤器保存在SearchResultsComponent状态

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

这就是表单标签的外观

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

类过滤器组件扩展了React.Component{
建造师（道具）{
超级（道具）
}
设置过滤器（过滤器）{
this.props.setFilters（过滤器）
}
render（）{
返回(
…允许您从筛选器列表中选择筛选器的输入。。。
)
}
}

这就是替代方案的样子

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)} />
    )
  }
}

类过滤器组件扩展了React.Component{
建造师（道具）{
超级（道具）
}
设置过滤器（过滤器）{
this.props.setFilters（过滤器）
}
render（）{
返回(
…允许您从筛选器列表中选择筛选器的输入。。。
)
}
}

---

谢谢

HTML标记应用于其语义，而不是用于任何内置功能。ie：只有当站点的某个区域是表单时，才应该使用表单标签。随着HTML的发展，它越来越强调页面的语义，这可以通过引入纯语义标记（如

、

和

）来说明

基于此，您可以简单地决定使用哪些标记：如果某个东西实际上是表单，则仅使用

表单

标记。不要仅仅为了提交功能而使用

表单

标记。页面上的标记对于处理网页（如GoogleWebLight）的代码非常重要

---

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

如果需要自动处理enter，您应该使用。如果没有，随你的便。考虑使用ReDux形式。这是一个很好的观点，我没有想到。此外，我们目前只使用React，但redux表单可能是我们将来研究的一个好工具。谢谢