Question

注意：使用ES 2015。

我正在创建一个过滤工具。加载组件时，会安装一行过滤选项，以及一个用于添加其他行的按钮。

addAnotherFilter() {
  return (
    <FilterRow 
      filterData={this.state.newFilter} 
      filterId={this.state.filterIdCounter} 
      handleFilterIdCounter={this.handleFilterIdCounter} 
      updateValue={this.updateValue} 
      updateType={this.updateType} 
      updateOperator={this.updateOperator} 
    />
  )
} 

render(){
  <return (
    <div>
      <div className="filters-container">
        <FilterRow 
          filterData={this.state.newFilter} 
          filterId={this.state.filterIdCounter} 
          handleFilterIdCounter={this.handleFilterIdCounter} 
          updateValue={this.updateValue} 
          updateType={this.updateType} 
          updateOperator={this.updateOperator} 
        />
      </div>
      <button onClick={this.addAnotherFilter}>Add another</button>
    </div>
  )
}

如何将新的filterRows附加到filters-container div的末尾？我从filterRow中获取了大量带有选定选项的数据，我需要将每行的选定选项存储在数组中的对象中。

我还需要能够删除每一行并从数组中删除它的数据。

Answer 1

您想要更新this.setState()以重新呈现UI。要更新状态，您必须使用... state = { filterRows: [ { filterData: "name", // initial filterData value filterId: 0 // initial filterId Value } ] } addAnotherFilter(filterData, filterId) { this.setState({ filterRows: [...this.state.filterRows, {filterData, filterId}]; }) } removeFilter(index) { this.setState({ filterRows: [...state.slice(0, index), ...state.slice(index + 1)]; }) } render() { <return ( <div> <div className="filters-container"> {this.state.filterRows.map((row, i) => <FilterRow key={i} filterData={row.filterData} filterId={row.filterId} handleFilterIdCounter={this.handleFilterIdCounter} updateValue={this.updateValue} updateType={this.updateType} updateOperator={this.updateOperator} removeFilter={() => this.removeFilter(i)} /> )} </div> <button onClick={() => this.addAnotherFilter("profession", this.state.filterRows.length)}>Add another</button> </div> ) }。忘记React中的“附加”内容，因为它非常罕见。在React way中，您的用户界面将反映您所在州的变化。您的代码应如下所示：

COUNT

React - 使用onClick

1 个答案: