Состояние реакции не определено

Question

Играя с реакцией, пытаясь создать простое приложение для чата, которое будет подключено к firebase.

У меня есть один контейнер - ChatApp - и один компонент UserInput.

ChatApp ->

import React from 'react'; 
import UserInput from '../components/UserInput'; 

export default React.createClass({ 
    getInitialState: function() { 
     return { 
      chatting: false 
     }; 
    }, 
    render: function() { 
     return <div> 
      <UserInput 
       startChat={this.chatCanStart} 
      /> 
     </div>; 
    }, 
    chatCanStart: function(recipient) { 
     console.log(recipient); 
     this.setState({ 
      chatting: true 
     }) 
    } 
}); 

UserInput ->

import React from 'react'; 

export default React.createClass({ 
    getInitialState: function() { 
     return { 
      username: '', 
      recipient: 'asgasg' 
     }; 
    }, 
    handleUsernameChange: function(event) { 
     let text = event.target.text; 
     this.setState({ 
      username: text 
     }); 
    }, 
    handleRecipientChange: function(event) { 
     let text = event.target.text; 
     this.setState({ 
      recipient: text 
     }); 
    }, 
    handleStartChat: function() { 
     if (this.state.username !== '' && this.state.recipient !== ''){ 
      console.log(this.state.recipient); 
      this.props.startChat(this.state.recipient); 
     } 
    }, 
    render: function() { 
     return <div className="panel panel-default"> 
      <div className="panel-heading"> Welcome to the chat app done in React </div> 
      <div className="panel-body"> 
       <div className="input-group"> 
        <span className="input-group-addon"> Username </span> 
        <input type="email" className="form-control" value={this.state.username} onChange={this.handleUsernameChange} /> 
       </div> 
       <br /> 
       <div className="input-group"> 
        <span className="input-group-addon"> Recipient </span> 
        <input type="email" className="form-control" value={this.state.recipient} onChange={this.handleRecipientChange} /> 
       </div> 
       <br /> 
       <button type="button" className="btn btn-primary" onClick={this.handleStartChat}> Chat now </button> 
      </div> 
     </div>; 
    } 
}); 

Когда я изменить имя пользователя и получателей поля, а затем нажмите на чат прямо сейчас кнопку, я ожидал, болтая состояние в ChatApp контейнер, чтобы изменить на true, а также хотите зарегистрировать прошедшего получателя.

Но я получаю «неопределенный», почему? Я получаю «undefined» даже в console.log в компоненте UserInput. Несмотря на то, что значение ввода в форме изменяется просто отлично.

Что я делаю неправильно?

Спасибо.

Answer 1

Чтобы получить значение от входа вам нужно использовать .value свойство вместо .text

handleUsernameChange: function(event) { 
    let text = event.target.value; 
    this.setState({ 
    username: text 
    }); 
}, 

handleRecipientChange: function(event) { 
    let text = event.target.value; 
    this.setState({ 
    recipient: text 
    }); 
}, 

Example