添加onclick處理程序，以現有的反應成分

考慮這個添加onclick處理程序，以現有的反應成分

class CarMaker extends React.Component { 
    constructor(props) { super(props); } 
    handleEvent() { /* common handler code */ } 

    getComponent() { 
     let component = null; 

     switch(type) { 
      case 'hatchback': 
       // unique logic about hatchbacks 
       // consider attribues computed inside each case 
       component = <HatchbackMaker {...hatchbackAttrs} />; 
       break; 
      case 'sedan': 
       component = <SedanMaker {...sedanAttrs} />; 
       break; 
      case 'truck': 
       component = <TruckMaker {...truckAttrs} />; 
       break; 
     } 
     // Is there any way to attach event handler like this dynamically? 
     component.onClick = this.handleEvent.bind(component); 
     return component; 
    } 

    render() { 
     let arr = []; 
     dataList.forEach(function(dataItem) { 
      arr.push(this.getComponent(dataItem.type)); 
     }, this); 

     return (<div>{arr}</div>;) 
    } 
}

什麼是添加的onClick處理程序的現有組件（在一個變量持有），並綁定該組件本身爲「本」價值的最佳方式是什麼？

來源

2016-12-26 Brieuce Wayne

不可以。您不應該動態添加事件，因爲您必須爲此使用'setState'，但這是錯誤的做法。這看起來像是你的代碼的體系結構問題，很難用這個有限的例子來解決，因爲你可能不應該使用switch語句來處理這樣的組件。發佈完整的代碼，以便我可以提供更多幫助。 dataList從哪裏來？ –

你也有'handleClick'的代碼嗎？ –

好吧，我明白你對架構的看法，目前雖然能夠動態地將onClick屬性添加到組件中，但會節省一些重複代碼。 –

爲什麼不

getComponent() { 
     let component = null; 

     switch(type) { 
      case 'hatchback': 
       // unique logic about hatchbacks 
       // consider attribues computed inside each case 
       component = <HatchbackMaker {...hatchbackAttrs} onClick={this.handleEvent.bind(this)}/>; 
       break; 
      case 'sedan': 
       component = <SedanMaker {...sedanAttrs} onClick={this.handleEvent.bind(this)}/>; 
       break; 
      case 'truck': 
       component = <TruckMaker {...truckAttrs} onClick={this.handleEvent.bind(this)}/>; 
       break; 
     } 

     return component; 
    }

我已經展示在上面的例子中道具的屬性分開，因爲我不知道這些包含轉讓時的onClick事件指派，您可以用通也分別爲prop attributes。

來源

2016-12-26 12:12:54

「this.handleEvent.bind（這）」在我的例子的上下文中「這個」將根據需要參照汽車製造商，而不是HatchbakMaker/SedanMaker /卡車製造商。我想在組件創建後綁定到組件。 –

-1

您希望基於通過的類型動態創建元素。

確保在開始時將類型更改爲大寫字母。

例如，「轎車」 - >「轎車」

或者用JS來大寫。

class Cars extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      carData: [] 
     }; 
    } 
    OonClickHandler() { 
     /* common handler code */ 
    } 
    componentWillMount() { 
     //Api call to server to get car types just for example 
     $.ajax("someUrl", success: (data) => { 
      //[ { title: 'Honda City', type: 'sedan', shapeSVGURL: '<url>', . . //more properties . }, { title: 'VW Golf', type: 'hatchback', otherUniqueAttrs: [] . //more properties . } ] 
      this.setState({carData: data}); 
     }); 
    } 
    render() { 
     return (
      <div> 
       //Make sure that type has upper case later at start or use JS to make it so 
       this.state.carData.map(car => React.createElement(car[type], {...car, onClick={this.onClickHandler}})) 
      </div> 
     ) 
    } 
} 

class Honda extends React.Component { 
    render() { 
     return (

     ) 
    } 
} 

class VWGolf extends React.Component { 
    render() { 
     return (

     ) 
    } 
}

來源

2016-12-26 14:29:14

我覺得它沒有接近我問了一下，也沒有回答根本問題 - 將click事件處理程序，以現有的組件和綁定組件本身的處理程序。 –

@BrieuceWayne嗯，這是你想要的，你不會動態附加事件處理程序。如果普通汽車共享邏輯，那麼你將該邏輯提升到汽車級別。 –

我同意你的榜樣移動共同邏輯級轎車，而這正是我爲什麼要組件對象以汽車製造商類處理程序綁定在我的例子，這樣會有處理所有類型的組件的一個方法。 –

添加onclick處理程序，以現有的反應成分

回答

相關問題