素材UI ListItem with Floating Action Button

Question

ボタンを含むlistItemで単純なリストを作成しようとしています。

import React from "react"; 
 
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'; 
 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
 
import Avatar from 'material-ui/Avatar'; 
 
import AccountCircle from 'material-ui/svg-icons/action/account-circle'; 
 
import ContentAdd from 'material-ui/svg-icons/content/add'; 
 
import FloatingActionButton from 'material-ui/FloatingActionButton'; 
 
import {List, ListItem} from 'material-ui/List'; 
 
import IconButton from 'material-ui/IconButton'; 
 

 
export default class Inbox extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    } 
 

 
    _test() { 
 
    alert("_test"); 
 
    } 
 

 
    render() { 
 
    let that = this; 
 

 
    // const iconButtonElement = (
 
    // <button onClick={that._test}></button> 
 
    //); 
 

 
    const iconButtonElement = (
 
     <FloatingActionButton mini={true} onMouseDown={ that._test }> 
 
     <ContentAdd /> 
 
     </FloatingActionButton> 
 
    ); 
 

 
    return (
 
     <div className="darkContainer"> 
 
     <div className="containerBanner"> 
 

 
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> 
 

 
      <div className="column5"> 
 
       { iconButtonElement } 
 

 
       <br></br> 
 

 
       <List> 
 

 
       <ListItem 
 
        leftAvatar={<Avatar icon={ <AccountCircle /> } />} 
 
        rightIconButton={iconButtonElement} 
 
        primaryText="Jon Doe" 
 
        onTouchTap={that._test} 
 
       /> 
 

 
       </List> 
 

 
      </div> 
 
      </MuiThemeProvider> 
 

 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}

リストが正常れるonmousedown関数を呼び出しますが、listItemの中に含まれるボタンがに失敗する前に、私は挿入ボタン：私は、次のコードを持っています。私はなぜこれが起こっているのか、listItemの作業でボタンをどうやって作ることができないのか分かりません。

私はこれをどのように修正する可能性についての提案を誰かが持っているのだろうか？例のコードは素晴らしいでしょう！

Answer 1

これで、onMouseDownをonTouchTapに変更することで修正できました。私はFloating Action Button docsのプロパティとしてこれを見ていないので、誰かがより良い解決策を持っているなら、私はそれを聞いてみたいです。

Answer 2

これは正しいスタイルなのかどうかわかりませんが、要素が関数なので、ハンドラをパラメータとして渡すことができます。複数のパラメータがある場合は、「handleOnMouseDown」の代わりに「props」または「this」を渡すと思います。ここ

const iconButtonElement = (handleOnMouseDown) => { 
     render <FloatingActionButton mini={true} onMouseDown={handleOnMouseDown}> 
     <ContentAdd /> 
     </FloatingActionButton> 

}

私のため

const iconButtonElement = (handleTouchTap) => { 
    return <IconButton 
    touch={true} 
    tooltip="star" 
    tooltipPosition="bottom-left" 
    onTouchTap={handleTouchTap} 
    > 
    <ToggleStarHalf color={yellow700} /> 
    </IconButton> 
} 

class PersonItem extends Component { 
    constructor(props, context) { 
    super(props, context); 
    } 

    handleUpdateStar() { 
    console.log('handleUpdateStar'); 
    } 

    handleClick() { 
    console.log('handleClick'); 
    } 

    render() {  
    const { person } = this.props; 
    return (
     <div> 
     <ListItem 
      onTouchTap={this.handleClick.bind(this)} 
      leftAvatar={ 
      <img 
       alt={person.name} 
       src={this.thumb(person.image)} 
       className="face" 
      /> 
      } 
      rightIconButton={iconButtonElement(this.handleUpdateStar.bind(this))} 
      primaryText={person.name} 
      secondaryText={person.desc} 
      secondaryTextLines={2} 
     /> 
     <Divider inset={false} /> 
     </div> 
    ); 
    } 
} 

を働いていた私のコードです