無法在React JS JSX中使用onClick事件處理函數調用一個函數fie

-1

您好我一直在嘗試使用onClick按鈕事件處理函數調用一個函數，以在我的.jsx文件中提交一個表單。但是，這似乎並沒有發生。以下是我用來實現相同的代碼。無法在React JS JSX中使用onClick事件處理函數調用一個函數fie

Layout.jsx（這具有的所有功能的邏輯）

import React from 'react'; 
//import ReactDOM from 'react-dom'; 
//import Success from "./components/success.jsx"; 
//import ReactDOM from 'react-dom'; 

class Layout extends React.Component { 
    constructor(){ 
     super(); 
     this.state = { 
      showComments: false, 
      comments:[{id:1, author:"sourav", body:"That's Awsome"}] 
     } 
    } 

    componentWillMount() { 
     console.log(this.state.comments) 
    } 

    getComments(){ 
     return this.state.comments.map((comment) => { 
      var fullComment = [comment.author, comment.body].join(" "); 
      console.log("fullComment", fullComment); 
      return fullComment; 
      } 
     ) 
    } 

    addComment(author, body){ 
     console.log("inside addComment") 
     const commentMessage = { 
      id: this.state.comments.length + 1, 
      author, 
      id 
     } 
     this.setState({comments:this.state.comments.concat([commentMessage])}); 
    } 

    submitHandler(event){ 
     event.preventDefault(); 

     let author = this.author; 
     let body = this.body; 
     console.log("author is", author); 
     addComment(author.value, body.value) 
    } 



    render() { 
     return (
      <html> 
       <head> 
        <title>JSX</title> 
        <link rel = "stylesheet" src = "../../css/app.less"/> 
       </head> 

       <body> 
        <h1>Welcome to Comment form</h1> 
        <div id = "maincontent"> 

         <form onSubmit = {this.submitHandler.bind(this)}> 
          Author : <br/> 
          <input placeholder = "Name" ref = {(input) => this.author = input}/><br/><br/> 
          Your Comment:<br/> 
          <textarea placeholder = "Enter comments" ref = {(textarea) => this.body = textarea}></textarea><br/><br/> 
          <input type = "submit" placeholder = "Add Comment"/> 
         </form> 
         <p>{this.getComments.bind(this)}</p> 
        </div> 

       </body> 

      </html> 
      ); 
    } 
} 



Layout.propTypes = { 

} 

Layout.defaultProps = { 

} 

/*class CommentClass extends React.Component{ 



    render(){ 

    } 
}*/ 

//ReactDOM.render(<Layout/>, document.getElementById("para")); 
export default Layout;

app.jsx

'use strict'; 

import React from 'react'; 
import Layout from './layout.jsx'; 
import {Router, RouteHandler} from 'react-router'; 

/*export default React.createClass({ 
    render: function() { 
     return (
      <Layout {...this.props}> 
       <Router.RouteHandler {...this.props} /> 
      </Layout> 
     ); 
    } 
});*/ 

class App extends React.Component{ 
    constructor(){ 
     super(); 
    } 
    render(){ 
     return(
      <Layout {...this.props}> 
       <Router.RouteHandler {...this.props} /> 
      </Layout> 
      ) 
    } 
} 

export default App;

react.jsx

'use strict'; 

import React from 'react'; 
import { Route,createRoutes } from 'react-router'; 
import ReactDOM from 'react-dom'; 

import Layout from '../public/views/layout.jsx'; 
import App from '../public/views/app.jsx' 

const routes = createRoutes(
    <Route path='/' component={App}> 
     <Route path="/signin" component={Layout}></Route> 
    </Route> 
); 

/*let routes = (
    <Route path='/' component={App}> 
     <Route path="/signin" name = "layout" component={Layout}></Route> 
    </Route> 
    )*/ 

export default routes; 

//ReactDOM.render(<Route path = '/signin' component = {Layout}></Route>)

能否請你幫我出這個？請讓我知道是否需要其他信息。

來源

2016-08-15 Sourav

在你submitHandler功能，改變

addComment(author.value, body.value)

到

this.addComment(author.value, body.value)

addComment是一個連接到Layout.prototype，所以你必須訪問它的<Layout />實例。

來源

2016-08-15 05:52:24

嗨，我已經試過了。這裏的問題是submitHander甚至沒有被調用.. – Sourav

除非你遺漏了更多的代碼，否則'submitHandler''將被調用，一旦提交按鈕被調用。 –

請您詳細說明一下嗎？我無法理解這一點。 – Sourav

無法在React JS JSX中使用onClick事件處理函數調用一個函數fie

回答

相關問題