3

material-ui を使用したアイテムのリストがあります。アイテムがクリックされたときに _handleTouchTap() を呼び出し、ListItem のキーをハンドラーに渡したいと思います。

追加する

onTouchTap={this._handleTouchTap}

「this」が間違ったスコープのように見えるため、 to が機能していません

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);
4

4 に答える 4

1

新しい ES6 クラス構文とアロー関数を使用する場合は、これが答えになる可能性があります。クラス構文を使用してコンテキストthisを正しく指定している場合は、キーワードを明示的にバインドする必要があります。メソッドを期待しているので、ES6 アロー関数を使用して関数を返しています。thisonTouchTap

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>
       );
    }
}
于 2016-09-30T11:43:38.607 に答える
0

listitem onTouchTap プロップを設定し、イベントを handleTouchTap パラメータに設定する必要があります

<ListItem onTouchTap={this._handleTouchTap} />

_handleTouchTap: function(event){
  var clickedID = event.target.id
}
于 2015-12-09T13:15:51.953 に答える