Question

在reactjs中重写ajax代码并添加一个单击按钮以从服务器加载内容。我有这个代码与ajax。它适用于点击功能。这是当单击Modal按钮时，它使用name变量通过ajax从服务器加载数据。

因此下面的工作ajax代码

<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>

现在我想用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"
?>

Answer 1

为此，您只能在 componentDidMount（）挂钩中添加点击事件监听器。我创建了bin here。

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

因此，无论何时单击该按钮，它都会登录到控制台。您可以在按钮点击时执行任何操作。但是使用jquery with react不是一个好习惯，所以我绝对不会推荐它。

有很多文章解释了为什么jquery不应该像本文一样使用反应

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

*

jQuery在这种情况下通常指的是DOM脚本，其中包含事件和UI更新发生在浏览器DOM中。因为React处理事件直接使用虚拟DOM，理论上使用React应该意味着你根本不需要使用jQuery。更改浏览器DOM 在您的React应用程序之外意味着React可能不再处理状态，事件和UI呈现。而且，这意味着你基本上建立两件完全不同的方式;送两个依赖关系加载到浏览器而不是一个。不过 - 事实并非如此世界末日如果两者都被使用，你只需要知道每个人在做什么以及另一个人如何处理

*

Answer 2

我们假设这是您的常规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 （这是您的React组件。这将是您的父组件）

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;

+

Answer 3

移动按钮也可以反应组件。试试这个

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>
    )
  }

});

通过单击按钮

3 个答案: