ReactJS 和 AltJS 使用下拉按钮

Posted 2023-02-22

【中文标题】ReactJS 和 AltJS 使用下拉按钮

【英文标题】：ReactJS and AltJS Using DropDown Button

【发布时间】：2015-10-21 01:25:37

【问题描述】：

我无法弄清楚为什么这不起作用。 我创建了一个下拉按钮，其中填充了我的用户或数组。但是它存在于组件<DropDown/>

我想将下拉列表中选定的用户传递给我的组件。我考虑过使用flux(altjs)与我的组件进行通信。

在我的 UserStore 中有

this.selected = "";
this.bindListeners(
  handleSelected: UserActions.GET_SELECTED;
)

handleSelected(data) 
  this.selected = data;

在 useraction 中，我只是说明操作是

getSelected(data) 
   this.dispatch(data)

我的下拉菜单的反应组件是这样的：

import React from 'react';
import Link,State, Route from 'react-router';
import Router from 'react-router';
import UserActions from 'actions/UserActions';
import UserStore from 'stores/UserStore';
import ReportsStore from 'stores/ReportsStore';
import ReportsActions from 'actions/ReportsActions';
export default class Dropdown extends React.Component 
constructor(props) 
  super(props);
  this.state = ReportsStore.getState();
  this.state = UserStore.getState();
  this.state.link = window.location.href;
  this.state.singleReport = [];
  this.state.listVisible = false;
  this.state.display ="";
    

componentDidMount() 
  let state = this.state.link;
  state = state.split('/');
  state = state[state.length-1];
  ReportsActions.getSoloReport(state);
  ReportsStore.listen(this._onChanges);
    

componentWillUnmount() 
  ReportsStore.unlisten(this._onChanges);
    

_onChanges = () => 
  this.setState(
      singleReport: ReportsStore.getState().singleReport,
      duplicate: ReportsStore.getState().singleReport
    );


select = (item) => 
  this.props.selected = item;
  UserActions.getSelected(item);


show = () => 
  this.setState(listVisible: true);
  document.addEventListener("click", this.hide);


hide = () => 
  this.setState(listVisible: false);
  document.removeEventListener("click", this.hide);




render()
          if(this.props.selected == undefined) 
            this.props.selected.email = "Ui";
            this.props.selected.profile.firstName = "jajaj";
            this.props.selected.profile.lastName = "blahablah";
          
          return <div className="dropdown-container" + (this.state.listVisible ? " show" : "")>
            <div className="dropdown-display" + (this.state.listVisible ? " clicked": "") onClick=this.show>
              <span style= color: 'white' >this.props.selected.email + " : " + this.props.selected.profile.firstName + " " + this.props.selected.profile.lastName</span>
              <i style= color: 'red'  className="fa fa-angle-down"></i>
            </div>
            <div className="dropdown-list">
              <div>
                this.renderListItems()
              </div>
            </div>
          </div>;
        

renderListItems() 
          let items = [];
          for (let i = 0; i < this.props.list.length; i++) 
            let item = this.props.list[i];
            items.push(<div onClick=this.select.bind(null, item)>
              <span style= color: 'black' >item.email + " : " + item.profile.firstName + " " + item.profile.lastName</span>
              <i style= color: 'black'  className="fa fa-check"></i>
            </div>);
          
          return items;
        

最后在我的添加报告中，我只是通过这样做来调用 this.selected 中存在的数据

selectedId: UserStore.getState().selected

但是，在我的渲染中执行 selectedId 的 console.log 后，它返回未定义。这没有任何意义。 IT 应该返回在 selected() 下单击的项目

编辑：我不得不将 this.selected 的变量更改为 this.selectedData 或其他东西，由于某种原因它不会读取 this.selected。所以我现在可以阅读了。但是，一旦我更改下拉列表中的名称，就会发送新数据，但当前选中状态的任何内容都不会显示在下拉框中。

基本上，我无法在 UI 中显示我选择的内容（如果我在下拉菜单中点击“John Smith”，请填写该框，但是数据正在组件之间发送

【参考方案1】：

所以问题是每当我从下拉列表中选择用户时，flux 都会告诉我的组件重新渲染，因此下拉列表的初始值始终相同。因此，为了使它像下拉菜单一样工作，每次我从商店中获得我选择的值时，我都会将该值设置为我的初始值。因此，在每次渲染时，它都会在下拉框中渲染正确的元素。