React - 使用 onClick 创建子组件的动态列表

Posted 2023-02-23

【中文标题】React - 使用 onClick 创建子组件的动态列表

【英文标题】：React - create dynamic list of child components with onClick

【发布时间】：2018-09-27 23:45:48

【问题描述】：

注意：使用 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 附加到过滤器容器 div 的末尾？我从带有选定选项的 filterRow 中获得了大量数据，我需要将每行选定的选项存储在数组中的对象中。

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

【问题讨论】：

我假设self 你的意思是this？

是的，抱歉，我通常会在某个地方定义它。我会加进去的。

这是一种反模式。你不应该这样做。

【参考方案1】：

您想更新 state 以重新呈现 UI。要更新状态，您必须使用this.setState()。忘记一点关于在 React 中“附加”的东西，因为它非常罕见。在React way 中，您的 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>
  )

【讨论】：

您在方法中的格式是否与 ES '15 兼容？或者你能告诉我如何在 ES '15 中做同样的事情吗？此外，每个新行都将使用具有空值的相同默认模板。每行有两个选择框和一个输入字段，通过添加一个额外的 filterRow 用户可以堆叠过滤器。

它适用于 ES2015 :)。 “此外，每个新行都将使用具有空值的相同默认模板。每行有两个选择框和一个输入字段，并且通过添加一个额外的 filterRow 用户可以堆叠过滤器”，很酷，我的代码为一个简单的示例创建了它，您可以继续调整它以满足您的需求。试试看吧。