Formumdaki tepkime ile oluşturulan düğme sayfayı yenilemeye devam ediyor

node.js ve react.js kullanarak bir sohbet uygulaması yapmaya çalışıyordum, ancak sayfamın düğmesini her tıkladığımda sayfayı yenilediği bu sorunu atlayamıyorum. Web geliştirme konusunda oldukça yeniyim, bu yüzden sorunum çok açıksa beni affet. Kodum aşağıda bulabilirsiniz: Burada Formumdaki tepkime ile oluşturulan düğme sayfayı yenilemeye devam ediyor

// 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') 
);

ilgili HTML: Nedense

<!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>

uyarısı benim teslim işlevinde ulaştı asla. Bu düğmeye bastığımda sayfayı yeniler. Bunun React, jQuery veya HTML'mde kaçırdığım tuhaf bir şeyle ilgili bir sorun olup olmadığından emin değilim. Düğmemde ve preventDefault() işlevinde de 'onsubmit =' false '' kullanmayı denedim, ancak yine de sorunu tam olarak belirleyemedim. Sayfanın davranışını nasıl düzeltirim ve bu sorunu daha yakından incelemek için hangi araçları kullanmayı düşünebilirim?

kaynak

2015-06-25 GenericAlias

neyin alakalı html? – depperm

Bana bir temsilci sorunu gibi geliyor - Gönderme işleyicisini oluştururken #chat'un DOM'de bulunmayacağını biliyorum. (Varsayılan eylemi ve önlenmesi) belgeye göndermek için yetki

Dene:

$(document).on('submit','#chat',function(e) { 
e.preventDefault(); 
... 
});

kaynak

2015-06-25 00:10:44 Adam

Evet, haklı olduğunu düşünüyorum. Bu modelin ayrıca sayfanın işlevselliği için de iyi çalışacağını düşünüyorum. Teşekkürler! – GenericAlias

@GenericAlias: Bu kısa vadeli bir çözüm sunarken, React'ı doğru şekilde kullanmak için kodunuzu yeniden düzenlemelisiniz. –

Bu, varsayılan HTML davranışınıdır. Düğmeler varsayılan olarak düğmeleri gönderir, böylece onları tıklatarak formu gönderir. Onunla bir şey yapmak görünmemektedir çünkü

<button type="button">Send</button>

Ayrıca sadece <form> elemanını kaldırmak olabilir: Bunu istemiyorsanız, o zaman "aptal" butonuna olun. Diğer yanıt açıklandığı gibi

diğer sorun, düğme var önce olay işleyicisi bağlamaya çalışıyoruz, vardır.

jQuery ve React'ı karıştırmanın yolu dağınıktır, kodunuzun sürdürülmesi ve akılda tutulması daha zor hale gelir.

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

Benzer şekilde, messageData bileşenin durumunda bir parçası olmalıdır, ama ben size kalmış dönüşüm bırakın: Sadece Tepki bileşenlerin içinde her şeyi tutmak.

Temel olarak kullandığınız Yol Akışı şu an için size çok fazla fayda sağlamaz. Daha fazla React documentation, özellikle Thinking in React ve Interactivity and Dynamic UIs'u okumanızı öneririz.

kaynak

2015-06-25 00:10:30

Teşekkürler! Bu sorunu çözmeye yardımcı oldu! – GenericAlias

TEŞEKKÜR EDERİZ! Sayfamın neden birkaç saatliğine canlandığını inceledim, 'type =" button "' did it !! – Mintberry

Senin sorunun tepki de kontrollü ve kontrolsüz bileşenleri ile ilgili bir şey olduğunu. Denetlenmeyen bileşende: İletiyi işlemek için bir işleyici işlevini çağırmıyorsanız VEYA HTML'nin varsayılan davranışını kapatmazsanız, Gönder düğmesine her zaman DOM tarafından işlenir.

Kontrollü bileşende: Bir işleyici işlevi, gönderildikten sonra eylemi gerçekleştirir. Kontrollü bileşen için Örnek:

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>

Detaylı tartışma burada: https://facebook.github.io/react/docs/uncontrolled-components.html https://facebook.github.io/react/docs/forms.html

kaynak

2017-03-19 16:34:39 Vish

Formumdaki tepkime ile oluşturulan düğme sayfayı yenilemeye devam ediyor

cevap

İlgili konular