blob: 979d9c933718dc9542761b11a48462506b5a110e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
import React, {useState} from 'react';
import Button from './Button';
import isURL from "validator/lib/isURL";
function Form(props) {
const [state, setState] = useState({value: '', valid: false});
const handleSubmit = () => {
if (state.valid) {
props.addRequest(state.value);
}
};
const handleChange = e => {
const userInput = e.target.value;
const valid = isURL('https://' + userInput);
setState({value: userInput, valid: valid});
};
const handlePaste = e => {
e.preventDefault();
const pattern = /^https?:\/\//;
setState({value: e.clipboardData.getData('Text').replace(pattern, ''), valid: false});
};
return (
<form id="form" onSubmit={(e) => e.preventDefault()}>
<div className="input-group">
<div className="input-container">
<span className="input-field-text">https://</span>
<input className="input-field" required value={state.value} onChange={handleChange} onPaste={handlePaste}/>
</div>
<Button valid={state.valid} submit={handleSubmit}/>
</div>
</form>
)
}
export default Form;
|
