onClick不被稱爲ReactJS

在downvoting之前，我已經通過圍繞同一問題的其他許多解決方案，並找不到解決此問題的答案。onClick不被稱爲ReactJS

遇到麻煩試圖讓onclick屬性火了我的功能，這裏是從有問題的部件一塊：

構造：

constructor() { 
     super(); 
     this.state = { 
      submissionFormCount: 0 
     } 
     this.addToSubmissionFormCount = this.addToSubmissionFormCount.bind(this); 
    }

渲染：

   <div className="row"> 
        <div className="col s12 m12 l12"> 
         <h5 onClick={this.addToSubmissionFormCount} style={beatSubmissionStyles.colorize}><span>(Plus) </span>add another beat</h5> 
        </div> 
       </div>

clickHandler事件：

addToSubmissionFormCount() { 
     alert('Here'); 
     this.setState({ 
      submissionFormCount: this.state.submissionFormCount++ 
     }); 
    }

我從Express服務器使用 '反應-DOM /服務器'

以下是我正在呈現組件渲染應用：

exports.beatSubmission = (req, res) => { 
    const appString = renderToString(<App type="beatSubmission"/>); 
    res.send(beatSubmissionTemplate({ 
     body: appString 
    })) 
}

來源

2017-02-04 SuperCoolDude1337

除了將'

'換成''以改善網頁的可訪問性之外，代碼對我來說看起來還不錯。 – zurfyx

你是在客戶端加載你的應用程序的所有或全部節點？你對如何使用express進行渲染的評論讓我覺得你沒有加載應用程序的客戶端版本。 – Parris

@Parris我在客戶端渲染（我相信），頁面正確渲染，我上面貼的標記是我主要應用程序組件的一個子項。 – SuperCoolDude1337

我想你只能渲染你在服務器端反應的組分。我想這樣做的原因是因爲你已經複製下面的代碼：

exports.beatSubmission = (req, res) => { 
    const appString = renderToString(<App type="beatSubmission"/>); 
    res.send(beatSubmissionTemplate({ 
     body: appString 
    })) 
}

你呈現組件爲字符串，並運送字符串前端作爲靜態HTML。雖然這確實會給你正確的渲染標記，但它會產生一個非交互式的應用程序。

要有單擊處理工作，你還需要編譯你的JS，幷包括其上的前端使用這樣的：

https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/server.js#L76 renderToString(<Html assets={webpackIsomorphicTools.assets()} store={store}/>));

有幾個方法可以做到這一點。您可以手動添加一個腳本文件，並在您的模板中預先打包用於前端的JS，或者您可以使用Webpack Isomorphic Tools。

我懷疑你讀了一個反應教程，導致你的同構（服務器/客戶端渲染）路徑。您可以在服務器，客戶端或兩者上運行響應。在兩者上運行都需要一些工作，但會導致應用程序「感覺」更快。

來源

2017-02-05 08:27:54 Parris

我需要使用商店嗎？ – SuperCoolDude1337

@SuperCoolDude1337你可以避免使用redux，stores等。這裏唯一重要的部分就是包含一個JS包。所以'webpackIsomorphicTools.assets（）'應該是你所需要的。 – Parris

我可以沒有看到任何代碼問題。然而，唯一讓我想到的是，如果您將<h5>渲染爲某種功能，例如可能是映射和數組。如果是這樣，您需要在返回前在渲染函數中定義var self = this，然後使用self.addToSubmissionFormCount。

P.S.我不建議在<h5>標記中使用onClick處理程序標記

來源

2017-02-05 01:31:00

你能詳細說明最後一個音符嗎？ –

將您的h5更改爲定位標記。所以更換：

<h5 onClick={this.addToSubmissionFormCount} style={beatSubmissionStyles.colorize}><span>(Plus) </span>add another beat</h5>

有：

<a onClick={this.addToSubmissionFormCount} style={beatSubmissionStyles.colorize}><span>(Plus) </span>add another beat</a>

您可以樣式你的錨反正你想後。例如，如果您希望懸停時沒有光標，請添加cursor: none

來源

2017-02-05 01:36:18

感謝您的建議，但這仍然給我同樣的問題。 – SuperCoolDude1337

您不應該改變反應狀態。

變化： this.state.submissionFormCount ++ 要： this.state.submissionFormCount + 1

來源

2017-02-05 06:38:13

onClick不被稱爲ReactJS

'換成''以改善網頁的可訪問性之外，代碼對我來說看起來還不錯。 – zurfyx

回答

相關問題