Question

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

添加

onTouchTap={this._handleTouchTap}

to不能正常工作＆＃39;这个＆＃39;似乎是错误的范围

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

如果由于Tim Welch上面提到的问题导致event.target.id无效，您只需将项目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
      }
});

如果您使用的是es6，而不是使用onTouchTap={this._handleTouchTap.bind(this, item.id)}，您可以改为使用es6 fat arrow函数，该函数会自动绑定this。它可以这样做： onTouchTap={() => this._handleTouchTap(item.id)}

Answer 2

分享我学到的东西。查看Material-UI为创建可选列表提供的MakeSelectable高阶组件，该列表为您提供当前所选项目onChange的索引。自问题提出以来，这可能是新的。请注意下面的ListItem上的value属性和SelectableList上的onChange事件。

import {List, ListItem, MakeSelectable} from 'material-ui/List'
SelectableList = MakeSelectable(List)

const siteItems = Object.keys(sites || {}).map((index) => {
  const site = sites[index]
  return (<ListItem
    key={index + 1}
    value={site.id}
    leftAvatar={<Avatar icon={<PinDrop />} />}
    primaryText={site.name}
    secondaryText={site.description}
    style={styles.list}
  />)
})
CurList = (
  <div style={styles.listcontainer}>
    <SelectableList onChange={this.siteSelected}>
      {siteItems}
    </SelectableList>
  </div>
)

我发现设置listitem的id并尝试通过event.target.id访问它的模式的问题是，如果你的List项目中有子元素，如图标，标签等，event.target会有所不同大多数列表示例都有。

Answer 3

你必须设置listitem onTouchTap prop并将event设置为handleTouchTap参数

<ListItem onTouchTap={this._handleTouchTap} />

_handleTouchTap: function(event){
  var clickedID = event.target.id
}

Answer 4

如果您想使用较新的ES6类语法和箭头功能，这可能就是答案。如果使用类语法正确指定this上下文，则需要显式绑定this关键字。 onTouchTap需要一个方法，所以我使用ES6箭头函数返回一个函数。

import { Component, React } from 'react';
import { List, ListItem } from 'material-ui/List';
class Main extends Component {

   constructor() {
      super(...arguments);
      this._handleTouchTap = this._handleTouchTap.bind(this);
   }

   _handleTouchTap(id) {
       return () => console.log(id) // Logs item id
   }

   render () {        
      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(item.id)}
                   />
                )
             })}
           </List>
       );
    }
}

材料-ui＆amp; TouchTap：获取ListItem的键

4 个答案: