Question

我的反应代码似乎不起作用。我有以下html：

的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
        <div id="example"></div>

        <form id="frm1" action="form_action.asp">
          First name: <input type="text" name="fname"><br>
          Last name: <input type="text" name="lname"><br><br>
          <input type="button" onclick="myFunction()" value="Submit" class="btn-primary">
        </form>

        <script src="build/react.js"></script>
        <script src="build/react-dom.js"></script>
        <script type="text/babel" src="helloworld.js"></script>
    </body>
</html>

以及以下反应代码

helloworld.js：

var Comment = React.createClass({
   render: function(){
      return(
         <div>
            <div className="commentText">Some Comment</div>
            <button onClick="">Edit</button>
            <button onClick="">Remove</button>
         </div>
      );
   }
});


function myFunction() {
        alert("hello world");
}

ReactDOM.render(
   <Comment />,document.getElementById('example')
);

但它既没有吐出示例div中的注释，也没有调用输入字段的函数。我怀疑我的React设置总体上有问题，这就是我同时在这里发布这两件事的原因。但是，构建文件夹和引用的文件都存在。

Answer 1

可行，请检查this link。

var Comment = React.createClass({
   render: function(){
      return(
         <div>
            <div className="commentText">Some Comment</div>
            <button onClick="">Edit</button>
            <button onClick="">Remove</button>
         </div>
      );
   }
});


function myFunction() {
        alert("hello world");
}

ReactDOM.render(
   <Comment />,document.getElementById('example')
);

Answer 2

使用webpack来转换你的代码，因为babel-browser已被移除。 see this 也可以在helloworld.js的react组件中定义反应onClick事件函数像

var Comment = React.createClass({
    handleClick: function() {
        alert("hello world");
   }
   render: function(){
      return(
         <div>
            <div className="commentText">Some Comment</div>
            <button onClick={this.handleClick()}>Edit</button>
            <button onClick="">Remove</button>
         </div>
      );
   }
});

function myFunction() {
        alert("hello world");
}

ReactDOM.render(
   <Comment />,document.getElementById('example')
);

要设置网络包，请关注this链接。它很容易遵循

React不呈现

2 个答案: