關於塊單擊事件

我有一個容器是一組按鈕，但讓我們只是將組件看作單個組件。該組件有一個onBlockClick，它收到id的位置。我想將id變成registrationSomeContainer關於塊單擊事件

我的問題是，我怎樣才能解決從onBlockClick其他容器？

let registrationContainer = ({ 
    i18n, 
    id, 
    name, 
    representative, 
    onBlockClick, 
    dispatch 
}) => { 

    return (
     <div> 
      <div 
       className="app_wrapper" 
      > 
       <Block 
        leftIcon="close" 
        lines={[ 
         "Some", 
         representative 
        ]} 
        onBlockClick(id) 
       /> 
      </div> 
     </div> 
    ) 

}

來源

2016-10-27 Francisco Maria Calisto

你能澄清用例嗎？通過「將id轉換爲registrationSomeContainer」，你是什麼意思？ –

我有一個阻止按鈕，當我點擊它時，我想跳轉到其他容器。 –

我不確定完全理解你的用例，但是你應該有一個像{{currentBlock：1}}這樣的狀態的父反應組件。每個子塊應該有一個唯一的標識符，並將其與'currentBlock'進行比較以顯示與否。 'onBlockClick'實際上必須使用id作爲參數來調用以更新父狀態。 –

一個不太性能方法是

const registrationContainer = ({ 
    i18n, 
    id, 
    name, 
    representative, 
    onBlockClick, 
    dispatch 
}) => { 
    return (
     <div className="app_wrapper"> 
      <Block 
       leftIcon="close" 
       lines={[ 
        "Some", 
        representative 
       ]} 
       onBlockClick={onBlockClick.bind(null, id)} 
      /> 
     </div> 
    ); 
}

更優化的代碼可以

const registrationContainer = ({ 
    i18n, 
    id, 
    name, 
    representative, 
    onBlockClick, 
    dispatch 
}) => { 
    return (
     <div className="app_wrapper"> 
      <Block 
       id={id} // Look: passing id 
       leftIcon="close" 
       lines={[ 
        "Some", 
        representative 
       ]} 
       onBlockClick={onBlockClick} // Look: not binding 
      /> 
     </div> 
    ); 
} 

class Block extends Component { 
    handleClick = (e) => { 
     this.props.onBlockClick(this.props.id); 
    }; 

    render() { 
     <div onClick={this.handleClick}> 

     </div> 
    } 
}

爲什麼綁定壞的方式

綁定onBlockClick={onBlockClick.bind(null, id)}使得onBlockClick每次都得到新的引用，所以導致子組件重新呈現。從這裏閱讀更多https://daveceddia.com/avoid-bind-when-passing-props/

來源

2016-10-27 13:09:49 FlatLander

但是如果我有其他'registrationSomeContainer'我怎麼能跳到那個？ –

你能詳細說說你想要什麼嗎？ – FlatLander

當我點擊按鈕時，我想要去一個特定的容器，因爲我有一組按鈕將會轉到不同的容器。 –

關於塊單擊事件

回答

相關問題