更改組件反應js的onClick函數？

我有組件按鈕和2個函數。按鈕組件用於各種組件。對於某些需要onclick事件的函數，對於其他 - 秒。如何更改onclick事件的功能？我正在使用this answer，但總是在我的組件中未定義。更改組件反應js的onClick函數？

export default class MyButtonComponent extends Component { 

constructor(props) { 
    super(props); 
    propTypes: { 
     onClick: PropTypes.func 
    }; 
    this.state = { loading: false, api_url: "http://localhost:8000" }; 
} 

static get DefaultProps() { 
    return { 
    onClick: this.firstFunction(event) 
    } 
} 

firstFunction(){ 
/*some code*/ 
} 

secondFunction(){ 
/*some code*/ 
} 

render() { 
    return (
     <LaddaButton 
      loading={this.state.loading} 
      onClick={this.props.onClick} 
      className='submit' 
      data-color="#eee" 
      data-style={SLIDE_UP} 
      data-spinner-size={30} 
      data-spinner-color="#ddd" 
      data-spinner-lines={12} 
      data-url={this.props.url} 
     > 
      Отправить 
     </LaddaButton> 

    ); 
}

而在另一個組件：

<FormGroup> 
    <Col mdOffset={5} md={7}> 
     <MyButtonComponent onClick={this.secondFunction} data-url="someurl.com"></MyButtonComponent> 
    </Col> 
</FormGroup>

也試過添加

onClick={e => this.secondFunction(e)}

到按鈕componentm但總是得到錯誤

_this2.secondFunction is not a function

來源

2017-02-07 Simple runner

是'secondFunction'在定義了''的父組件中定義的？ –

否，從另一個組件中構建組，在按鈕組件中定義的第二個功能。 –

'secondFunction'不應該在MyButtonComponent中定義，它應該在父組件中定義 –

既然你逝去的secondFunction()作爲支持的MyButtonComponent成分，因此它不能在MyButtonComponent組件，但在其它您有下面的代碼

<FormGroup> 
    <Col mdOffset={5} md={7}> 
     <MyButtonComponent onClick={this.secondFunction} data-url="someurl.com"></MyButtonComponent> 
    </Col> 
</FormGroup>

在組件中定義的MyButtonComponent可以參考它作爲this.props.onClick()但它必須在調用成分被定義

還需要綁定的功能，而把它當作道具到MyButtonComponent像

<FormGroup> 
    <Col mdOffset={5} md={7}> 
     <MyButtonComponent onClick={this.secondFunction.bind(this)} data-url="someurl.com"></MyButtonComponent> 
    </Col> 
</FormGroup>

檢查答案here瞭解流量更好

來源

2017-02-07 13:41:57

這是一個比我的更優雅的解決方案 - 傳遞函數的屬性非常靈活。 –

的問題看起來是與您如何使用this - 當你在你的其他組件的<FormGroup>元素調用this.secondFunction，它在尋找secondFunction在該組件。您在MyButtonComponent中定義了secondFunction，因此它會以undefined的形式返回。

您可以通過在MyButtonComponent中定義一個單擊處理程序來解決此問題，該處理程序根據您可以在外部更新的道具來選擇要調用的函數。例如。

function myClickHandler(e) { 
    if(useFirst) { 
     this.firstFunction(e); 
    } else { 
     this.secondFunction(e); 
    } 
}

然後，您可以在其他組件的呈現方法中更改該屬性，例如，

<FormGroup> 
    <Col mdOffset={5} md={7}> 
     <MyButtonComponent useFirst=false data-url="someurl.com"></MyButtonComponent> 
    </Col> 
</FormGroup>

來源

2017-02-07 13:45:50

謝謝，它根據需要工作。 –

更改組件反應js的onClick函數？

回答

相關問題