通過支柱使用ReactJS將函數傳遞給子組件

當我提供一個onClick道具的使用，並試圖通過一個功能，我得到以下錯誤：

AddForm.js：74遺漏的類型錯誤：_this3.props.onClick不是一個函數

代碼：

export default class Company extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
\t \t AddOrView: <AddForm header="Add User" formFields={this.fields} />, 
 
\t \t users: this.props.initialUsers 
 
\t } 
 
    } 
 
    handleAdd() { 
 
    console.log('Hello World'); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <AddWithTitle onClick={e => this.setState({ 
 
\t   AddOrView: <AddForm header="Add User" 
 
            formFields={this.fields} 
 
\t \t \t \t  formResponses="" 
 
\t \t \t \t  onClick={this.handleAdd} /> 
 
\t \t \t \t \t   }) 
 
\t \t \t  } src="blah.png"> 
 
\t  Add User</AddWithTitle> 
 
    ); 
 
    } 
 
} 
 

 
export default class AddForm extends React.Component { 
 
    
 
    render() { 
 
     return(
 
      <button className="btn btn-primary" 
 
\t \t \t \t formResponses={this.state.fieldValues} 
 
\t \t \t \t onClick={() => this.props.onClick()} > 
 
\t \t \t \t Save 
 
\t \t </button> 
 
    ); 
 
    } 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

謝謝您的幫助:)

來源

2017-01-23 Sequential

爲什麼你有兩個'公司'類。你不能在一個類的定義中創建道具，然後希望當你試圖重新定義道具出現時。只需將這兩個渲染函數合併到頂層定義中，並使用點擊處理程序定義本身代替道具 – Chase

對不起，錯誤的類，只是編輯，它應該是AddForm。不是問題的根源。 – Sequential

我不確定你爲什麼在你的渲染返回函數中使用set state，但是把所有你要做的就是在你的狀態下在'Company'返回函數中加入 jsx ...你永遠不會實際渲染''你是否定義了'某處？ – Chase

您必須將函數綁定到頂級組件，以便它可以在onClick方法中觸發您希望它觸發的任何內容。

<AddWithTitle onClick={e => this.setState({ 
     AddOrView: <AddForm header="Add User" 
           formFields={this.fields} 
       formResponses="" 
       onClick={this.handleAdd.bind(this)} /> 
         }) 
      } src="blah.png"> 
    Add User</AddWithTitle>

來源

2017-01-23 21:52:56

Sweet，以便消除錯誤，但現在它仍然沒有執行console.log（'Hello World'），想法如何？奇怪的是 – Sequential

。你是否嘗試刷新頁面並重試？另外，像上面提到的海報，不要在渲染功能中設置狀態。這是一種反模式，它會導致錯誤。爲每個點擊事件創建單獨的方法，這樣可以更清潔，並且可以防止將來發生錯誤。 –

好的，我會做出改變，謝謝你，是的，我嘗試清爽，不是什麼。我相信它可能與它在setState中有關。 @Mabeh Al-Zuq Yadeek – Sequential

通過支柱使用ReactJS將函數傳遞給子組件

回答

相關問題