javascript - 如何在下拉列表中选择一项来显示 react 数组中的数据？

Question

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

这是代码:

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

当您创建下拉选项时，您已经知道它的值，因此只需与其绑定(bind)，以便使用正确的参数调用回调，从而使您无需检查 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 });
}