ReactJS 和 AltJS 使用下拉按钮

Question

我无法弄清楚为什么这行不通。我创建了一个下拉按钮，其中填充了我的用户或数组。但是它存在于组件 <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 后，它 return 未定义。这是没有意义的。 IT 应该 return 在 selected()

下单击的项目

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

基本上，我无法将我选择的内容显示为在 UI 中选择的内容（如果我在下拉列表中点击 "John Smith"，请填写该框，但是数据正在发送组件

Answer 1

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

ReactJS 和 AltJS 使用下拉按钮

ReactJS and AltJS Using DropDown Button

javascript

jquery

flux

ecmascript-6

reactjs