javascript - react 状态未定义

Question

玩 React，尝试构建一个将连接到 firebase 的简单聊天应用。

我有一个容器 - ChatApp - 和一个组件 UserInput。

聊天应用 ->

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

用户输入 ->

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 并且还想记录传递的收件人。

但我得到“未定义”，这是为什么呢？我什至在 UserInput 组件的 console.log 中得到“undefined”。即使表单中的输入值正在更改也很好。

我做错了什么？

谢谢。

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