재질 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

저는 여전히 React에 매우 익숙합니다. 그래서 이것이 올바른 스타일인지 모르겠지만 요소가 함수이기 때문에 매개 변수로 핸들러를 전달할 수 있습니다. 둘 이상의 매개 변수가있는 경우 '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> 
    ); 
    } 
} 

위해 일한 내 코드입니다