Question

使用react，尝试构建一个将连接到firebase的简单聊天应用程序。

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

ChatApp - ＆gt;

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 - ＆gt;

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＆＃39;，为什么会这样？我得到了＃undefined＆＃39;甚至在UserInput组件的console.log中。即使表格中的输入值正在改变也很好。

我做错了什么？

感谢。

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

反应状态未定义

1 个答案: