CODEWITHSUNDEEP
javascriptreactjsonclick
ParisaN
ParisaN

Reputation: 2082

Button onClick does not working in reactjs

I'm new to reactjs. I called this libraries in head tag:

    <script src="react/build/react.js"></script>
<script src="react/build/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/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>

and this is my react code:

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")
);

Why Button onClick does not working in my code? also in inspector, onClick does not exist :

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

I know my question is repeated but I really don't find its solution.

Upvotes: 0

Views: 2545

Answers (2)

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

Place the submitMessage function above render.

When render executes, this.submitMessage should be defined. In your code, it is defined only after render. So, It won't be called. And use val() to get the value from the textbox using 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>

Upvotes: 1

Joseph Oliver
Joseph Oliver

Reputation: 21

There are two problems that are preventing your code from working as you want:

i. I believe the methods should go inside the first argument to React.createClass. Try var ChatApp = React.createClass({ componentDidMount: function () { ... }, ...

instead.

ii. $('#message') will return as array of jquery elements that match your selection. To see this, console.log(message), instead of console.log(message.value). There are two basic ways to solve this: either extract the first element from the array then inspect it's value, or use the .val() method on the selected jQuery object, which will return the value of the first element in the set of matched elements.

See this plunkr for working example

Upvotes: 1

Related Questions