Sé cómo controlar el componente de entrada. Pero este comportamiento no lo entendía en absoluto.
Tengo formulario antd con textarea en él.
<Item name='tags' className='input-item tag-helper' label='These are tags that appear on your NFT' > <TextArea value={text} className='big-text-area tag-text-area' placeholder='Enter a tag...' onKeyDown={addTag} /> </Item> El área de texto responsable de agregar etiquetas. Entonces, cuando escribo algo en la entrada, se controla mediante la variable useState y después de presionar espacio, se agrega a una matriz con etiquetas. Después de presionar espacio, la entrada debe borrarse pero no sucede nada.
Mi código se ve así en este momento:
const addTag = value => { setText(value.target.value) if (value.keyCode === 32) { setTags([...tags, text]) setText('') } }En la versión anterior:
const addTag = value => { if (value.keyCode === 32) { setTags([...tags, text]) setText('') } } <Item name='tags' className='input-item tag-helper' label='These are tags that appear on your NFT' > <TextArea value={text} className='big-text-area tag-text-area' placeholder='Enter a tag...' onKeyDown={addTag} onChange={v => setText(v.target.value)} /> </Item> Además, pensé que era una buena idea intentar configurar el texto a través de useEffect , así que experimenté y agregué la última función:
useEffect(() => { setText('') }, [tags])¿Alguien puede decirme qué estoy haciendo mal? ¿Por qué no puedo borrar el área de texto después de presionar "espacio"?
Podría ser algo relacionado con el hecho de que no está pasando un prop onChange a TextArea , por lo que no está en modo controlado e ignora el value prop que le está pasando. Podrías intentar esto:
<TextArea value={text} onChange={() => {}} className='big-text-area tag-text-area' placeholder='Enter a tag...' onKeyDown={addTag} /> o puedes hacer esto en onChange
const onChange = (e) => { const currentText = e.target.value; if(currentText.length && currentText[currentText.length - 1] === " "){ setTags([...tags, text]); setText(""); } else { setText(e.target.value); } } y deja el TextArea así
<TextArea value={text} onChange={onChange} className='big-text-area tag-text-area' placeholder='Enter a tag...' />Agregando event.persist(); funcionó para mí para borrar el área de texto, con respecto a la lista de etiquetas, depende completamente de cuál sea su estado inicial y cómo se maneja con la matriz de etiquetas.
const [text, setText] = useState(''); const [tags, setTags] = useState([]); const addTag = event => { event.persist(); console.log(tags); setText(event.value); if (event.keyCode === 32) { setText(''); setTags((previousTags) => { return [...previousTags,event.target.value]; }); } }; // textarea are I used <textarea value={text} className='big-text-area tag-text-area' placeholder='Enter a tag...' onChange={addTag} onKeyDown={addTag} />Resolví la tarea. No puedo controlar el componente porque está envuelto en Form.Item , el elemento tiene su propio estado, por lo que molesta controlar la Input directamente. Aquí están los cambios:
<TextArea value={text} onChange={v => setText(v.target.value)} onKeyUp={addTag} className='big-text-area tag-text-area' placeholder='Enter a tag...' /> const addTag = value => { if (value.keyCode === 32) { setTags([...tags, text]) setText('') } }