Enable using enter key to send message

This commit is contained in:
Franck Royer 2021-04-22 15:11:37 +10:00
parent 79846ee196
commit 06d8c2aca6
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
2 changed files with 13 additions and 2 deletions

View File

@ -1,8 +1,9 @@
import React, { ChangeEvent } from 'react';
import React, { ChangeEvent, KeyboardEvent } from 'react';
import { TextField } from '@material-ui/core';
interface Props {
messageHandler: (msg: string) => void;
sendMessage: () => void;
}
interface State {
@ -19,13 +20,22 @@ export default class MessageInput extends React.Component<Props, State> {
}
messageHandler(event: ChangeEvent<HTMLInputElement>) {
this.setState({inputText: event.target.value})
this.props.messageHandler(event.target.value);
}
keyPressHandler(event: KeyboardEvent<HTMLInputElement>) {
if (event.key === 'Enter') {
this.props.sendMessage()
this.setState({inputText: ''})
}
}
render() {
return (
<TextField variant='outlined'
label='Send a message'
value={this.state.inputText}
fullWidth
style={{ margin: 8 }}
margin="normal"
@ -33,6 +43,7 @@ export default class MessageInput extends React.Component<Props, State> {
shrink: true,
}}
onChange={this.messageHandler.bind(this)}
onKeyPress={this.keyPressHandler.bind(this)}
/>
);
}

View File

@ -49,7 +49,7 @@ export default function Room (props :Props) {
<Grid item xs={12}>
<Grid container spacing={2} direction='row' alignItems='center'>
<Grid item xs={11}>
<MessageInput messageHandler={messageHandler} />
<MessageInput messageHandler={messageHandler} sendMessage={sendMessage} />
</Grid>
<Grid item xs={1}>
<Send sendMessage={sendMessage} />