如何使用 .map 函数索引切换动态生成的下拉列表？

Posted 2023-03-23

【中文标题】如何使用 .map 函数索引切换动态生成的下拉列表？

【英文标题】：How to toggle dynamically generated dropdowns using the .map functions index?

【发布时间】：2019-04-10 20:56:27

【问题描述】：

我有一个数组，它为数组中的每个项目动态生成一个下拉列表。现在每个下拉列表共享相同的切换布尔值，因此它们都在同一时间打开和关闭，我怎样才能使其单独工作？

我在这里将每个对象映射到一个索引，然后开始创建下拉列表：

Object.keys(props.totalWorkload.options).map((item, i) => (
        <WorkloadOptions
          key=i
          cnt=i
          appendChoiceList=props.appendChoiceList
          modalDropDown=props.modalDropDown
          toggleDropDown=props.toggleDropDown
          totalWorkloadOptions=props.totalWorkload.options[item]
        />
      ))

创建下拉选项组件时，我将索引传递给函数：

<div>
    <Dropdown isOpen=props.modalDropDown toggle=props.toggleDropDown.bind(props.cnt)>
      <DropdownToggle caret>props.totalWorkloadOptions.optionTitle</DropdownToggle>
      <DropdownMenu>
        props.totalWorkloadOptions.options.map(op => (
          // tslint:disable-next-line:no-invalid-this
          // tslint:disable-next-line:jsx-no-lambda
          <DropdownItem key=op onClick= () => props.appendChoiceList(props.totalWorkloadOptions.optionTitle, op)>
            op
          </DropdownItem>
        ))
      </DropdownMenu>
      <strong> props.totalWorkloadOptions.optionDescription </strong>
    </Dropdown>
    <br />
  </div>

它将到达以下函数并控制台记录索引，然后将数组中的适当切换值设置为真/假：

  toggleDropDown = (index: any) => 
    console.log('triggered!:' + index);
    let clicked = this.state.modalDropDownClicked;
    // tslint:disable-next-line:no-conditional-assignment
    if (clicked[index]=!clicked[index])
      this.setState( modalDropDownClicked: !this.state.modalDropDown[index] );
    
  ;

【参考方案1】：

我可以推荐以下模式来切换动态创建的元素：

// Item.js

class Item extends React.Component 
  handleClick = () => 
    const  id, onClick  = this.props;
    onClick(id);
  
  
  render() 
    const  isOpen  = this.props;
    
    return (
    <li><button onClick=this.handleClick>isOpen ? 'open' : 'closed'</button></li>
    )
  



// App.js

class App extends React.Component 
  static getDerivedStateFromProps(nextProps, prevState) 
    const  items  = nextProps;
    if (items !== prevState.prevPropsItems) 
      return  items, prevPropsItems: items ;
    
    return null;
  
  
  state = 
    prevPropsItems: [],
    items: []
  
  
  toggleItem = id => this.setState(prevState => 
    const items = prevState.items.map(item => 
      if (item.id === id) 
        return  ...item, isOpen: !item.isOpen 
       else 
        return item;
      
    );
    return  items 
  )
  
  render()
    const  items  = this.state;
    
    return (<ul>
      items.map(item => <Item key=item.id id=item.id onClick=this.toggleItem isOpen=item.isOpen />)
    </ul>);
  


// AppContainer.js

const itemsFromRedux = [
       id: '1', isOpen: false ,
       id: '2', isOpen: false ,
       id: '3', isOpen: false ,      
    ]

ReactDOM.render(<App items=itemsFromRedux />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.development.js"></script>
    <div id="root"></div>

【讨论】：

谢谢，这是一个很大的帮助，我尝试实现它，数组不会被修复，因为它来自 GET，但这不重要。

在这种情况下，这些项目应该是 App 的一个道具（假设您正在使用例如 redux）。并且使用 getDerivedStateFromProps 在 props 刷新时将它们转换为 state，这样您就可以在 App 组件中处理它们的打开状态。

这是我第一次听说 GetDerivedStateFromProps ，在实现这些动态生成的下拉列表时是否有必要？我的代码流程是使用 MapStateToProps 来接收一个对象，其中包含一个对象数组，这个内部对象数组被迭代以创建下拉菜单，对于每个下拉菜单，应该创建一个第 n 个布尔值来控制第 n 个下拉菜单-向下，内部对象传递从 .map 索引中获取的 cnt 道具，this 在传递给表示下拉列表的组件中，该下拉列表应该使用 this 作为索引号传递给我的切换函数

现在映射函数中的索引记录为 Object 对象，我希望能够将它与布尔值数组进行比较，并以上面的方式实现它

open 和close 是应用程序的一个状态，因此更好地为它使用状态，因为它是为它设计的。没有理由使用额外的布尔值等来避免正常模式。（如果我理解得很好）。如果您想用 getDerivedStateFromProps 部分完成我的代码，它一点也不复杂。