Question

我正在使用React聊天应用程序创建房间，但似乎无法使我的文本表单和提交按钮正常工作。每当我输入一个按键时，firebase数据库中就会列出两个项目。文本字段甚至不显示我按的字母，也不需要按“创建房间”按钮。我在两个项目上都使用event.preventDefault();，但没有运气。

我想念什么？

下面是我的聊天室组件的代码。谢谢。

class RoomList extends Component {
constructor(props) {
    super(props);
    this.state = {
        rooms: [],
        newRoomName: '',
    };

    this.roomsRef = this.props.firebase.database().ref('rooms');
    this.onChange = this.onChange.bind(this);
    this.newRoom = this.newRoom.bind(this);
}

componentDidMount() {
    this.roomsRef.on('child_added', snapshot => {
        const room = snapshot.val();
        room.key = snapshot.key;
        this.setState({ rooms: this.state.rooms.concat(room) });
    });
}

onChange(event){
    event.preventDefault();
    this.setState({text: event.target.value});
    this.roomsRef.push({name: this.state.newRoomName});

}

newRoom(event){
    event.preventDefault();
    this.setState({newRoomName: ''});
}


render() {
    return (
        <div className="roomlist">
            <div>
                {this.state.rooms.map((room) => <ul key={room.key}>{room.name}</ul>)}
            </div>
        <form className="submit" onChange={this.onChange}>
            <button type="submit">
                Create Room
            </button>
            <input type = "text" placeholder="New Room" value={this.state.newRoomName}  onChange={ this.onChange }/>
        </form>
        </div>


    );
}

}

导出默认的RoomList；

Answer 1

您的代码有很多问题。您正在使用this.state.newRoomName作为输入字段值但是在onChange中，您是否要在setState中设置“文本”键？

<input type = "text" placeholder="New Room" value={this.state.newRoomName}  onChange={ this.onChange }/>

this.setState({text: event.target.value}); <-----

更改为

this.setState({newRoomName: event.target.value});

第二，在onChange中，您使用的是刚设置状态下的newRoomName新值。 setState是异步的，因此在执行推送时可能不会设置新值。最好使用事件的值

第三，您的表单提交正在调用用于字段输入的同一onChange函数吗？

文本形式会过早发送数据

1 个答案: