React生成的button在我的表单不断刷新页面
我正在尝试使用node.js和react.js来创build一个聊天应用程序，但是我无法解决这个问题，每次点击我的页面button时，都会刷新页面。 如果我的问题非常明显，我对网站开发相当陌生，所以请原谅我。 我的代码可以在下面find：
// Array of messages to be rendered messageArray = []; var socket = io(); // Prompt the user for their username var user = prompt("Please enter your name", "Anonymous"); // Emit username information so that it can be kept track of socket.emit('new user', user); $('#chat').submit(function() { // When the user hits submit, create a message object with // information about their name, time sent, message, and socket id. // The socket id will be filled on the server side alert("hey"); var date = new Date(); var message = user + " (" + date.toLocaleTimeString('en-US') + "): " + $('#m').val(); var messageJSON = {text:message, username:user, id:"", time:date} socket.emit('chat message', messageJSON); // Reset the value field $('#m').val(''); return false; }); // On receiving a chat message, update messageArray and // rerender the ViewingBox socket.on('chat message', function(messages){ messageArray = []; for (var i = 0; i < messages.length; i++) { alert(messages[i].text) messageArray.push(messages[i].text); } React.render( <ViewingBox />, document.getElementById('root') ); }); // ViewingBox holds the view of the page and is updated whenever // a new message is received var ViewingBox = React.createClass({ render: function() { return ( <div> <h2>Global Chat: Logged in as {user}</h2> <ul id="messages"> {messageArray.map(function(data, i) { return (<li>{data}</li>) })} </ul> <form id="chat" action="#"> <input id="m" autoComplete = "off" /> /* * Button in question * */ <button>Send</button> </form> </div> ); } }); // Render the viewingBox when the page initially loads React.render( <ViewingBox />, document.getElementById('root') ); 这里是相关的HTML：
<!doctype html> <html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <body> <div id="root"></div> <script src="https://fb.me/react-0.13.3.js"></script> <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script type="text/jsx" src="/reactclient.js"></script> </body> </html>
由于某种原因，我的提交function中的警报永远不会到达。 它只是刷新页面，只要我按下button。 我不确定这是否是React，jQuery的问题，还是我错过了一些我错过的东西。 我已经尝试在button和preventDefault（）中使用'onsubmit =“return false”'，但仍然无法查明问题。 如何修复我的网页行为，以及我可以考虑使用哪些工具更密切地分析此问题？
听起来像一个代表团的问题 – 我敢打赌，当你创build提交处理程序时， #chat不在DOM中。
尝试委托提交到文档（并防止默认操作）：
$(document).on('submit','#chat',function(e) { e.preventDefault(); ... });
这是默认的HTML行为。 button是默认提交button，所以点击它们将提交表单。 如果你不想要那个，那么把它变成一个“哑巴”button：
<button type="button">Send</button>
你也可以简单地移除<form>元素，因为你似乎没有做任何事情。
另一个问题是，正如另一个答案中所解释的那样，您正试图在button存在之前绑定事件处理程序。
你混合jQuery和React的方式是混乱的，使得你的代码更难维护和难以推理。 只需将所有内容保留在React组件中：
var ViewingBox = React.createClass({ getInitialState: function() { return { message: '' }; }, _onMessageChange: function(event) { this.setState({message: event.target.value}); }, _send: function() { var date = new Date(); var message = user + " (" + date.toLocaleTimeString('en-US') + "): " + this.state.message; var messageJSON = {text:message, username:user, id:"", time:date} socket.emit('chat message', messageJSON); // Reset the value field this.setState({message: ''}); }, render: function() { return ( <div> <h2>Global Chat: Logged in as {user}</h2> <ul id="messages"> {messageArray.map(function(data, i) { return (<li>{data}</li>) })} </ul> <form id="chat" action="#"> <input value={this.state.message} onChange={this._onMessageChange} autoComplete="off" /> <button type="button" onClick={this._send}>Send</button> </form> </div> ); } });
同样， messageData应该是组件状态的一部分，但是我将转换留给您。
目前基本上你使用React的方式并没有给你带来太多好处。 我build议阅读更多React文档 ，尤其是React和Interactivity中的 Thinking 和Dynamic UI 。
您的问题与React中受控和不受控制的组件有关。 在不受控制的组件中：如果您不调用处理函数来处理提交或如果您不closuresHTML的默认行为，则提交button将始终由DOM处理。
在受控组件中：处理函数将在提交时处理操作。 受控组件示例：
handleSubmit(event) { alert('A name was submitted: ' + this.state.value); **event.preventDefault();** } <form onSubmit={**this.handleSubmit**}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form>
详细的讨论在这里： https ： //facebook.github.io/react/docs/uncontrolled-components.html https://facebook.github.io/react/docs/forms.html