ボタンをクリックしてreactjsを使用してデータを表示

reactjsでajaxコードを書き換え、サーバーからコンテンツをロードするためのクリックボタンを追加します。私はこのコードをajaxで持っています。クリック機能で動作します。つまり、Modalボタンをクリックすると、name変数を使用してajax経由でサーバーからデータをロードします。ボタンをクリックしてreactjsを使用してデータを表示

は、したがって

<script> 


$(document).ready(function() { 
$('.modalLink').click(function(){ 


name=$("#name").val(); 
$.ajax({  

    type : 'POST', 
    url : 'modalcontent.php', 
    data:"name="+name,  
    //data : $(this).serialize(), 
    success : function(data) 
    { 
    $("#content").html(data); 

    } 
}); 

}); 

}); 

     </script> 

<button id="modalLink">load data</button>

以下の作業AJAXのコードでは、今、私はこの使用してreactjsを再書きたいです。以下は私が達成したものです。 reactjsコードは正常に動作しています。ここで、ユーザーがモーダルボタンをクリックすると、サーバーからコンテンツをロードするように、クリックボタンを追加する必要があります。誰かが私にそれを手伝ってもらえますか？そのために

<!DOCTYPE html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>React</title> 


</head> 
<body> 


<button id="modalLink">load data</button> 

<div id="app"></div> 
<script type="text/babel"> 

var MainBox = React.createClass({ 
    render:function(){ 
     return(
      <App/> 
     ); 
    } 
}); 




var MainBox = React.createClass({ 
    getInitialState: function() { 
    return { data: null }; 
    }, 

    componentDidMount: function() { 
    $.get('modalcontent.php').done(function(data) { 
     this.setState({data: data}); 
var me=this.state.data; 
//alert(me); 
    }.bind(this)); 
    }, 




render: function() { 
    return this.state.data ? 

<div dangerouslySetInnerHTML={{__html: this.state.data}} /> 
    : <div>Loading...</div>; 
} 

}); 






ReactDOM.render(
    <MainBox />, 
    document.querySelector("#app") 


); 





</script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> 
</body> 
</html>

modalcontent.php

<?php 

echo "everything is ok" 
?>

出典

2017-10-05 bowman87

あなただけcomponentDidMount（にclickイベントリスナーを追加することができます） hook.Iはbin hereを作成しました。ボタンがクリックされるたびに

$("#modalLink").click(function() { 
    console.log('call api here'); 
    })

だから、console.Youにログインします反応するとのjQueryのボタンclick.But用途にあなたがここに欲しいものを行うことができ、私は間違いなくそれをお勧めしませんので、良い習慣ではありません。この文脈でのjQueryのは、通常はどこ、DOMスクリプティングを指し

jQueryのに使用すべきでない理由を説明する多くの記事がありますが、この記事

Why is it a bad idea to mix jQuery and React?

中などの反応しますイベントとUIの更新はブラウザDOMで行われます。 Reactはイベントを直接処理し、仮想DOMを使用するため、Reactを使用して理論的にはは単にjQueryを使用する必要はありません。ブラウザDOMを変更すると、Reactアプリケーションの外側にあるは、状態、イベント、およびUIレンダリングを処理していない可能性があります。また、あなたは基本的にはという建物のことを意味します。 2つの依存関係の負荷を1つではなくブラウザに送ります。それでも - の両方が使用されている場合、それはが世界の終わりではない、あなただけ注意する必要がありの何それぞれがやっているし、他はその

出典

2017-10-05 12:18:23 pritesh

に対処する方法のは、このことを想定してみましょうあなたの通常のHTMLは次のとおりです。index.htmlを

<!DOCTYPE html> 
<html lang = "en"> 

    <head> 
     <meta charset = "UTF-8"> 
     <title>React App</title> 
    </head> 

    <body> 
     <div id = "app"></div> 
     <script src = "main.js"></script> 
    </body> 

</html>

main.js（あなたのHTMLで反応したコンテンツを表示するために表しスクリプトファイル）

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.js'; 

ReactDOM.render(<App />, document.getElementById('app'));

App.js（これはあなたのリアクションコンポーネントです。これは

import React from 'react'; 

class App extends React.Component { 

constructor(props) { 
    super(props); 
    this.state={ 
     data1 = 'No data available' 
    }; 

getDataFromServer(){ 
    //call your PHP function to get the data. 
    //Let's assume after fetching the data, you store it in a variable "data1". 

    this.setState({ 
     data1 = data1; 
    }) 
} 
    render() { 
     return (
     <div> 
      <button onClick={this.getDataFromServer.bind(this)}>Display Data</button> 
      <div ref='displayArea'>{this.state.data1}</div> 
     </div> 
    ); 
    } 
} 

export default App;

出典

2017-10-05 12:21:37

移動]ボタンもコンポーネントを反応させるために）あなたの親コンポーネントになります。試してみてください

var MainBox = React.createClass({ 
    getInitialState: function() { 
    return { data: null }; 
    }, 

    componentDidMount: function() { 
    $.get('modalcontent.php').done(function(data) { 
     this.setState({data: data}); 
     var me=this.state.data; 
    //alert(me); 
    }.bind(this)); 
    }, 

    handleOnclick: function(){ 
    $.get('modalcontent.php').done(function(data) { 
     this.setState({data: data}); 
     var me=this.state.data; 
    //alert(me); 
    }.bind(this)); 
    }, 

    render: function() { 
    return (
     <div> 
     (this.state.data && <div dangerouslySetInnerHTML={{__html: this.state.data}} />) 
     (!this.state.data && <div>Loading...</div>) 
     <button id="modalLink" onClick={this.handleOnclick}>load data</button> 
     </div> 
    ) 
    } 

});

出典

2017-10-05 12:24:18

ボタンをクリックしてreactjsを使用してデータを表示

答えて

関連する問題