javascript - 按钮onClick在reactjs中不起作用

Question

我是 ReactJS 新手。我在 head 标签中调用这个库:

    <script src="react/build/react.js"></script>
<script src="react/build/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/15.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="chat-component.js" type="text/babel"></script>

这是我的 react 代码:

var ChatApp = React.createClass({
  getInitialState: function () {
    return {
        messages: [],
        socket: window.io('http://localhost:3000')
    }
},
componentDidMount: function () {
  var self = this;
    this.state.socket.on("receive-message", function (msg) {
        console.log(msg);
        self.setState({messages: self.state.messages.push(msg)})
    });
},
render: function () {

    return (

        <div>
            <input id="message" type="text"/>
            <button type="button"  onClick={this.submitMessage} id="demo" value="send">send</button>
        </div>
    )
},
submitMessage: function () {

    var message = $('#message').value;
    // this.socket.emit("new-message", message);
     console.log(message);    
},

});

ReactDOM.render(
<ChatApp />,
document.getElementById("chat")
);

为什么 Button onClick 在我的代码中不起作用？同样在检查器中，onClick 不存在:

<button type="button" id="demo" value="send">send</button>

我知道我的问题重复了，但我真的找不到解决方案。

Answer 1

将 submitMessage 函数放在 render 上方。

当render执行时，应该定义this.submitMessage。在您的代码中，它仅在 render 之后定义。所以，它不会被调用。并使用 val() 使用 jQuery 从文本框中获取值

var ChatApp = React.createClass({
  getInitialState: function () {
    return {
        messages: [],
    }
  },
  submitMessage: function () {

    var message = $('#message').val();
    // this.socket.emit("new-message", message);
     console.log(message);    
  },
  render: function () {

      return (

          <div>
              <input id="message" type="text"/>
              <button type="button"  onClick={this.submitMessage} id="demo" value="send">send</button>
          </div>
      )
  }
});

ReactDOM.render(
<ChatApp />,
document.getElementById("chat")
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="chat"></div>