react.js JSXページを使用しているときにonClickボタンイベントハンドラが機能しない

ボタンクリックで関数を呼び出すときにWebアプリケーションを構築しようとしています。 JSXページを使用してテンプレートエンジンとしてreact-engineを使用しています。以下は、私は両方this.propsを使用して関数を呼び出すだけでなく、それにこれを結合した後、直接呼び出して試してみましたreact.js JSXページを使用しているときにonClickボタンイベントハンドラが機能しない

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

class Layout extends React.Component { 
    constructor(props) { 
     super(props); 
     this.displayName = 'Layout'; 
     this.state = {data:[]}; 
     //this.arrayHandler = this.arrayHandler.bind(this); 
     this.forceUpdateHandler = this.forceUpdateHandler.bind(this); 
     this.printHandler = this.printHandler.bind(this); 

    } 

    /*function submitter(){ 
     //console.log("in submitter function", user.value); 
    },*/ 
    /*arrayHandler(){ 
     var item = "first item"; 
     var myArray = this.state.data; 
     myArray.push(item); 
     this.setState({data:myArray}) 
    }*/ 

    forceUpdateHandler(){ 
     return this.forceUpdate(); 
    } 

    printHandler(){ 
     return this.displayName = "Sourav"; 
    } 

    render() { 
     return (
      <html> 
       <head> 
        <title>JSX</title> 
       </head> 

       <body> 
        <h1>Welcome to React JSX Page</h1> 
        <div id = "maincontent"> 

         <Message msg = "Displaying message"/> 
         <p id = "para"></p> 
         <Success successMsg = "Transaction successful"/> 
         <h2>Arrays: {this.props.propArray}</h2> 
         <h2>Objects: {this.props.propObject.objectName1}</h2> 

         <input type = "button" onClick = {this.props.propHandler} value = "Add items"/> 
         <h3>State Arrays: {this.state.data}</h3> 

         <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button> 
         <h4>Random number: {Math.random()}</h4> 

         <button onClick = {this.printHandler}>Show name</button> 
         <p>{this.displayName}</p> 

        </div> 
       </body> 

      </html> 
      ); 
    } 
} 

Layout.propTypes = { 
    propArray: React.PropTypes.array.isRequired, 
    propObject: React.PropTypes.object, 
    propHandler: React.PropTypes.func 
} 

Layout.defaultProps = { 
    propArray: [1,2,3,4,5], 
    propHandler: function arrayHandler(){ 
        var item = "first item"; 
        var myArray = this.state.data; 
        myArray.push(item); 
        this.setState({data:myArray}) 
       }, 
    propObject: { 
     objectName1:"objectValue1", 
     objectName2: "objectValue2", 
     objectName3: "objectValue3" 
    } 
} 

class Message extends React.Component{ 
    render(){ 
     return(
      <div> 
       <h2>{this.props.msg}</h2> 
      </div> 
      ) 
    } 
} 



//ReactDOM.render(<Layout/>,); 


export default Layout;

私layout.jsxページです。しかし、両方のアプローチはうまくいかなかった。

これで私を助けてください。私は完全にここにこだわっています。

出典

2016-08-14 Sourav

どのようなエラーが表示されますか？ブラウザに何も表示されていませんか？ –

エラーはありません@PraveenPrasad ..ボタンは機能しません。私がボタンを押すと、何も出てこない。 – Sourav

あなたはReactDOM.renderをどこかのファイルのどこかに置いていますか？また、最終生成バンドルを含むHTMLファイルも表示します。あなたは ''、 ''タグなどを反応コンポーネントに含めました。これはどのように行われたのでしょうか。 –

私はあなたがリアクションの設定などをする方法を知っていると仮定しています。これは、イベントがバインドされ、最終的にDOM要素を変更する方法です。

問題は、コンポーネントthis.displayName = "Sourav"のプロパティを更新しようとしていて、それに基づいてUIが自動的に更新されることを期待していますか？しかし、それは反作用の仕方ではありません。変更を表示するには、コンポーネントのstateまたはprops（親コンポーネントを介して小道具を設定する）を変更する必要があります。また、反応成分の中にhead、htmlbodyタグなどを書き込まないでください。

import React, {PropTypes} from 'react'; 

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

    this.updateName1 = this.updateName1.bind(this); 
    this.updateName2 = this.updateName2.bind(this); 

    this.state = { 
     name1: undefined 
    } 
    } 

    updateName1(){ 
    this.setState({ 
     name1: 'Praveen' 
    }); 
    } 


    updateName2(){ 
    this.name2 = "I won't be updated on UI" 
    } 

    render() { 
    return (<div> 
     <button onClick={this.updateName1}>Update Name1</button> || 
     <button onClick={this.updateName2}>Update Name2</button> 
     <br /> 
     <div> 
     Name1: {this.state.name1} <br /> 
     Name2: {this.name2} <br /> 
     </div> 
    </div>); 
    } 
} 

MyComponent.propTypes = { 
};

出典

2016-08-14 13:06:57

react.js JSXページを使用しているときにonClickボタンイベントハンドラが機能しない

答えて

関連する問題