#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 для рабочего примера