如何 select 下拉列表中的一项显示反应中数组中的数据？

Question

我是 React 的新手，我在 ES6 React 中构建了一个下拉菜单，其中显示了一张图片和一行文本。它工作正常并从数据数组中获取数据并显示它。现在我必须做一件事：当用户单击下拉列表中的一个选项时，下拉列表将关闭并显示所选选项而不是原始选项 [0]。我尝试用 javascript 句子采用 innerHTML，但这不是这样做的方法。

代码如下：

import React from "react";

class StatusBarCompaniesView extends React.Component {

    mixins: [ClickAwayable]


    constructor(props) {
        super(props)
        this.state = {dropdown: false}
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ dropdown: !this.state.dropdown });
    }

    clickSelectOption(e){
        console.log(e.target);
        e.stopPropagation();
        var valueNode = this.refs.dropDownValue.getDOMNode();
        valueNode.innerHTML = e.target.innerHTML;
        valueNode.setAttribute('data-value',e.target.getAttribute('data-value'))
    }

    render() {
        var me = this;
        var company_items = [
           { payload: '1', imageurl: 'images/avatar.png',       text: 'Burger Apps, SL' },
           { payload: '2', imageurl: 'images/avatar-apple.png', text: 'Apple Computer Inc' },
           { payload: '3', imageurl: 'images/avatar-hp.png',    text: 'Hewlett Packard' },
           { payload: '4', imageurl: 'images/avatar-apple.png', text: 'Eyects Systems' }
        ];

        var cx = require('classnames');
        var dropdown = cx ({
            'aui-profit-statusbar-companies-dropdown-container' : true,
            'dropdown' : this.state.dropdown
        });

        var cx = require('classnames');
        var selected = cx ({
            'aui-profit-statusbar-companies-container' : true,
            'selected' : this.state.dropdown
        });

    return (
        <div className={selected} onClick={this.handleClick}>
        <div ref="dropDownValue">
            <div className="aui-profit-statusbar-selected-company-logo"><img src={company_items[0].imageurl}/></div>
            <div className="aui-profit-statusbar-selected-company-name">{company_items[0].text}</div>
        </div>
            <div className={dropdown}>
                    {company_items.map(function(option, index){
                        return (
                            <div key={index} className="option" data-value={option.payload} onClick={me.clickSelectOption.bind(me)}>
                                <div className="aui-profit-statusbar-companies-logo"><img src={option.imageurl}/></div>
                                <div className="aui-profit-statusbar-companies-name">{option.text}</div>
                            </div>

                        );
                    })}         
            </div>
        </div>
    );
  }
};


module.exports = StatusBarCompaniesView;

欢迎任何形式的帮助！谢谢！

Answer 1

当你创建下拉选项时，你已经知道它的值，所以只需绑定它，这样回调就会用正确的参数调用，让你免于检查 DOM，例如：

在渲染中（）

{company_items.map(function(option, index){
    return (
        <div key={index} className="option" onClick={me.clickSelectOption.bind(me, option.payload)}>
            <div className="aui-profit-statusbar-companies-logo"><img src={option.imageurl}/></div>
            <div className="aui-profit-statusbar-companies-name">{option.text}</div>
        </div>

    );
})}

然后在处理程序中：

clickSelectOption(payload){
    console.log(payload);
    this.setState({ selected: payload });
}

Answer 2

这是最后的组件，谢谢大家：

import React from "react";

class StatusBarCompaniesView extends React.Component {

    mixins: [ClickAwayable]


    constructor(props) {
        super(props)
        this.state = {dropdown: false, selectedOption: 0}
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ dropdown: !this.state.dropdown });
    }

    componentWillMount() {
        this._closeMenuIfClickedOutside = function(event) {
            if (!this.state.dropdown) {
                return;
            }
            var menuElem = this.refs.selectMenuContainer.getDOMNode();

            var eventOccuredOutsideMenu = this.clickedOutsideElement(menuElem, event);

            // Hide dropdown menu if click occurred outside of menu
            if (eventOccuredOutsideMenu) {
                this.setState({
                    dropdown: false
                }, this._unbindCloseMenuIfClickedOutside);
            }
        }.bind(this);

        this._bindCloseMenuIfClickedOutside = function() {
            document.addEventListener('click', this._closeMenuIfClickedOutside);
        };

        this._unbindCloseMenuIfClickedOutside = function() {
            document.removeEventListener('click', this._closeMenuIfClickedOutside);
        };
    }

    clickedOutsideElement(element, event) {
        var eventTarget = (event.target) ? event.target : event.srcElement;
        while (eventTarget != null) {
            if (eventTarget === element) return false;
            eventTarget = eventTarget.offsetParent;
        }
        return true;
    }

    clickSelectOption(playload){
        console.log(playload);
        this.state.selectedOption = playload
        console.log(this.state.selectedOption)
    }

    render() {
        var me = this;
        var company_items = [
           { payload: '0', imageurl: 'images/avatar.png',       text: 'Burger Apps, SL' },
           { payload: '1', imageurl: 'images/avatar-apple.png', text: 'Apple Computer Inc' },
           { payload: '2', imageurl: 'images/avatar-hp.png',    text: 'Hewlett Packard' },
           { payload: '3', imageurl: 'images/avatar-apple.png', text: 'Eyects Systems' }
        ];

        var cx = require('classnames');
        var dropdown = cx ({
            'aui-profit-statusbar-companies-dropdown-container' : true,
            'dropdown' : this.state.dropdown
        });

        var cx = require('classnames');
        var selected = cx ({
            'aui-profit-statusbar-companies-container' : true,
            'selected' : this.state.dropdown
        });

    return (
        <div className={selected} onClick={this.handleClick}>
        <div ref="dropDownValue">
            <div className="aui-profit-statusbar-selected-company-logo"><img src={company_items[this.state.selectedOption].imageurl}/></div>
            <div className="aui-profit-statusbar-selected-company-name">{company_items[this.state.selectedOption].text}</div>
        </div>
            <div className={dropdown} ref="selectMenuContainer">
                {company_items.map(function(option, index){
                    return (
                        <div key={index} className="option" onClick={me.clickSelectOption.bind(me, option.payload)}>
                            <div className="aui-profit-statusbar-companies-logo"><img src={option.imageurl}/></div>
                            <div className="aui-profit-statusbar-companies-name">{option.text}</div>
                        </div>
                    );
                })}         
            </div>
        </div>
    );
  }
};


module.exports = StatusBarCompaniesView;

如何 select 下拉列表中的一项显示反应中数组中的数据？

How to select one item in a dropdown which shows the data from an array in react?

javascript

reactjs