mirror of https://github.com/sualko/cloud_bbb
42 lines
960 B
TypeScript
42 lines
960 B
TypeScript
|
import * as React from 'react';
|
||
|
|
import {
|
||
|
|
Component, InputHTMLAttributes,
|
||
|
|
SyntheticEvent
|
||
|
|
} from 'react';
|
||
|
|
|
||
|
|
export interface SubmitInputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||
|
|
type?: 'text' | 'number';
|
||
|
|
initialValue?: string;
|
||
|
|
onSubmitValue: (value: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface SubmitInputState {
|
||
|
|
value: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export class SubmitInput extends Component<SubmitInputProps, SubmitInputState> {
|
||
|
|
state: SubmitInputState = {
|
||
|
|
value: ''
|
||
|
|
};
|
||
|
|
|
||
|
|
constructor(props: SubmitInputProps) {
|
||
|
|
super(props);
|
||
|
|
this.state.value = props.initialValue || '';
|
||
|
|
}
|
||
|
|
|
||
|
|
onSubmit = (event: SyntheticEvent<any>) => {
|
||
|
|
event.preventDefault();
|
||
|
|
this.props.onSubmitValue(this.state.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {initialValue, onSubmitValue, ...props} = this.props;
|
||
|
|
|
||
|
|
return <form onSubmit={this.onSubmit}>
|
||
|
|
<input value={this.state.value}
|
||
|
|
{...props}
|
||
|
|
onChange={event => this.setState({value: event.currentTarget.value})}/>
|
||
|
|
</form>;
|
||
|
|
}
|
||
|
|
}
|