자식이 클릭했을 때 값을받지 못하는 목록 항목에 대해 onClick 함수를 사용합니다.

Question

기본 테이블을 빌드하는 데 부트 스트랩을 사용하고 있으며 선택한 것으로 표시 할 수 있도록 행을 클릭하는 사용자를 처리하고 싶습니다.

내 목록 항목에는 중첩 된 요소가 있습니다. 목록 항목을 직접 클릭하면 onClick 처리기가 호출되고 'event.target.value'가 올바르게 설정됩니다.

중첩 된 요소를 클릭하면 onClick 처리기가 여전히 호출되지만 'event.target.value'는 정의되지 않습니다.

나는 render 메소드 내부의 바인딩을 기반으로 많은 제안을 읽었지만, 권장되는 방법은 아니라는 것을 알고 있습니다.

internalHandleSelectTeam() { 
    const teamId = this.props.team.teamId; 
    this.props.onSelectTeam(teamId); 
} 

나는 이것이 좋은 방법이 있는지 확실하지 않습니다 여부 만 작동하고 필요로하지 않습니다

class TeamListItem extends Component { 

    constructor(props) { 
     super(props); 
     this.internalHandleSelectTeam = this.internalHandleSelectTeam.bind(this); 
    } 

    internalHandleSelectTeam(event) { 
     console.log(event.target.value); 
    } 

    render() { 
     const team = this.props.team; 
     return (
      <li className="list-group-item" value={team.teamId} onClick={this.internalHandleSelectTeam}> 
       <Row> 
        <Col xs={10} sm={8} md={6}> 
         {team.teamName} 
        </Col> 
        <Col xs={2} sm={4} md={6}> 
         {team.resourceList.length} 
        </Col> 
       </Row>  
      </li> 
     ); 
    } 
} 

export { TeamListItem } 

Answer 1

좋아, 나는 그것이 'internalHandleSelectTeam'기능을 수정하여 작업 있어요 render 함수 내부 바인딩.