54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
import React, {useState} from 'react';
|
|
|
|
const enterKey = 13;
|
|
|
|
const TermInput = ({terms, setTerms}) =>
|
|
{
|
|
const [value, setValue] = useState('');
|
|
|
|
const handleKeyDown = ev =>
|
|
{
|
|
if (ev.keyCode === enterKey)
|
|
{
|
|
ev.preventDefault();
|
|
|
|
if (!terms.includes(value))
|
|
{
|
|
setTerms(terms.concat([value]));
|
|
}
|
|
|
|
setValue('');
|
|
}
|
|
};
|
|
|
|
const handleChange = ev =>
|
|
{
|
|
setValue(ev.target.value);
|
|
};
|
|
|
|
const handleRemove = removedTerm =>
|
|
{
|
|
console.log(removedTerm);
|
|
console.log(terms);
|
|
setTerms(terms.filter(term => term !== removedTerm));
|
|
};
|
|
|
|
return (
|
|
<div className="TermInput">
|
|
{terms.map(term =>
|
|
<span
|
|
className="TermInput_term"
|
|
onClick={handleRemove.bind(null, term)}
|
|
>{term}</span>
|
|
)}
|
|
<input
|
|
autofocus="true" type="text" className="TermInput_input"
|
|
placeholder="Rechercher un symptôme, un signe ou une maladie…"
|
|
value={value}
|
|
onChange={handleChange} onKeyDown={handleKeyDown} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TermInput;
|