作出反應 - 如何更改基於點擊事件父

子狀態我已經建立了一個側邊欄這樣作出反應 - 如何更改基於點擊事件父

<SideBar> 
    <SideBarItem/> 
    <SideBarItem selected/> 
    <SideBarItem/> 
</SideBar>

的選擇將決定邊框顏色。現在，當我點擊邊欄時，我希望邊框顏色相應地改變。這是我嘗試

require('./SideBar.scss'); 
export class SideBar extends React.Component { 
    setSelection(e) { 
     // Set the selection border 
     console.log(e); 
     this.props.children.forEach(child => { 
      console.log(child) 
      if (child == e.target) { // This doesn't work 
       child.select(); 
      } else { 
       child.deSelect(); 
      } 
     }); 
    } 
    render() { 
     return (
      <div onClick={this.setSelection.bind(this)} className="SideBar"> 
       {this.props.children} 
      </div> 
     ); 
    } 
}; 

require('./SideBar.scss'); 
export class SideBarItem extends React.Component { 
    constructor(props) { 
     super(); 
     if (props.selected) { 
      this.state = {selected: true, style: { 
       boxShadow: '4px 0 0 #10956D' 
      }}; 
     } else { 
      this.state = {selected: false, style: {}}; 
     } 
    } 
    select() { 
     this.setState({selected: true, style: '4px 0 0 #10956D'}); 
    } 
    deSelect() { 
     this.setState({selected: false, style: ''}); 
    } 
    render() { 
     return (<div onClick={this.props.onClick} style={this.state.style} className="SideBarItem"> 
      {this.props.children} 
     </div>); 
    } 
};

正如你所看到的想法是有它通過迭代的孩子，並將其與該事件的側邊欄單擊處理。我無法找到一種方法來檢查事件目標是否與孩子匹配。

來源

2017-06-22 vuoriov4

你爲什麼要添加父它調用的孩子而兒童增加的onClick處理方法一個onClick處理程序？ – pwolaq

因爲我需要在另一個孩子@pwolaq上調用deSelect，如果我將處理程序添加到每個孩子，我如何取消選擇之前選擇的項目？ – vuoriov4

您可以通過強制SideBar將onClick處理程序附加到每個孩子來實現所需的行爲。並將點擊的孩子的索引作爲參數傳遞 - 以後您可以唯一標識它。

像這樣的事情在SideBar.render應該做的伎倆：

var childIndex = -1; 
var modifiedChildren = React.Children.map(this.props.children, (child) => 
{ 
    childIndex++; 
    return React.cloneElement(
     child, 
     {onClick:() => this.setSelection(childIndex)}, 
     child.props.children); 
}) 

return <div className="SideBar">{modifiedChildren}</div>

來源

2017-06-22 09:57:26 Amid

作出反應 - 如何更改基於點擊事件父

回答

相關問題