Material-ui和TouchTap:获取ListItem的关键字

Question

我有一个使用material-ui的项目列表.我想在单击该项时调用_handleTouchTap()并将ListItem的键传递给处理程序.

添加

onTouchTap={this._handleTouchTap}

因为"这个"似乎是错误的范围

var React = require('react');
var Mui = require('material-ui');
var ThemeManager = new Mui.Styles.ThemeManager();
ThemeManager.setTheme(ThemeManager.types.LIGHT);
var injectTapEventPlugin = require('react-tap-event-plugin');
injectTapEventPlugin();
var List = Mui.List
var ListItem = Mui.ListItem

var Main = React.createClass({
  childContextTypes: {
    muiTheme: React.PropTypes.object
  },
  getChildContext: function () {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    }
  },
  render: function() {
    var items = [
      {id: 1, title: 'Item 1'},
      {id: 2, title: 'Item 2'},
      {id: 3, title: 'Item 3'}
    ]
    return (
        <List>
          {items.map(function(item){
            return <ListItem key={item.id} primaryText={item.title} />
          })}
        </List>
    )
  },

  _handleTouchTap: function() {
    // the key of the item should be passed though here
  }
});

React.render(<Main />, document.body);

Answer 1

如果event.target.id由于Tim Welch上面指出的问题而无法工作,您只需将项目ID作为参数传递给处理函数

render: function() {
        var items = [
          {id: 1, title: 'Item 1'},
          {id: 2, title: 'Item 2'},
          {id: 3, title: 'Item 3'}
        ]
        return (
            <List>
              {items.map(function(item){
                return <ListItem key={item.id} 
                                 primaryText={item.title} 
                                 onTouchTap={this._handleTouchTap.bind(this, item.id)}/>
              })}
            </List>
        )
      },

      _handleTouchTap: function(id) {
        console.log(id) // Logs item id
      }
});

而不是使用的onTouchTap={this._handleTouchTap.bind(this, item.id)},如果你使用ES6您可以改用它会自动绑定一个ES6脂肪箭头功能this为您服务.它可以这样做: onTouchTap={() => this._handleTouchTap(item.id)}