Кнопка onClick не работает в reactjs

#javascript #reactjs #onclick

#javascript #reactjs #onclick

Вопрос:

Я новичок в 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")
);
  

Почему кнопка onClick не работает в моем коде? также в инспекторе onClick не существует :

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

Я знаю, что мой вопрос повторяется, но я действительно не нахожу его решения.

Комментарии:

1. В этом сценарии я бы посоветовал не использовать jQuery только потому, что вы можете достичь желаемого без него. Вы можете добавить onChange к своим входным данным, чтобы вы могли обновлять состояние по мере ввода пользователем. После нажатия кнопки вы можете просто сослаться на значение в вашем состоянии. Вот классический пример из документов reactjs: codepen.io/ericnakagawa/pen/QKkJva?editors=0010

Ответ №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>  

Комментарии:

1. ранее функция submitMessage() была render() раньше. Я протестировал много способов. ):

2. @Digipng обновил ответ! Проверьте!

Ответ №2:

Существуют две проблемы, которые не позволяют вашему коду работать так, как вы хотите:

я. Я считаю, что методы должны входить в первый аргумент для React.createClass . Попробуйте
var ChatApp = React.createClass({
componentDidMount: function () {
...
},
...

вместо этого.

ii. $('#message') будет возвращен в виде массива элементов jquery, которые соответствуют вашему выбору. Чтобы увидеть это, console.log(message) вместо console.log(message.value) . Есть два основных способа решить эту проблему: либо извлечь первый элемент из массива, затем проверить его значение, либо использовать .val() метод для выбранного объекта jQuery, который вернет значение первого элемента в наборе сопоставленных элементов.

Смотрите этот plunkr для рабочего примера