wikimedica-disease-search/app/TermInput.js

54 lines
1.2 KiB
JavaScript
Raw Normal View History

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;