如何从 ReactJS 中组件的列表中获取值？答案

【问题标题】：How to get the value of from a list in a component in ReactJS?如何从 ReactJS 中组件的列表中获取值？
【发布时间】：2015-06-30 05:21:45
【问题描述】：

这是我创建的一个 React 组件：

<li>
    <a href="#">{this.props.header}</a>
    <ul className="submenu">
        <span>
            <li>
                <a href="#" ref="filterValue" onClick={this.onClick}>{skillsList}</a>
            </li>
        </span>
    </ul>
</li>

这是我定义的onClick函数：

onClick: function() {
    FilterClickAction.print(this.refs.filterValue.getDOMNode().textContent);
}

这是FilterClickAction 操作：

module.exports = {
    print: function (filterValue) {
       console.log('filter value is', filterValue);
    }
};

但此操作会返回链接中的所有值，而不仅仅是单击的链接的值。如何仅获取与单击的链接关联的值？

【问题讨论】：

您需要使用event.target 从事件而不是引用中获取值，然后使用您想要获取的任何内容。

标签： reactjs reactjs-flux

【解决方案1】：

让您的事件处理程序将值作为其第一个参数...

onClick: function(skillsList, event) {
  event.preventDefault()
  // ...
}

...和use Function.prototype.bind() to partially apply the value to be passed 调用事件处理程序时：

<a onClick={this.onClick.bind(this, skillsList)>{skillsList}</a>

【讨论】：