React:如何清除TextArea

Question

我知道如何控制输入组件。但这种行为我一点也不理解
我有一个包含文本区域的antd表单。

<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>

负责添加标记的textArea。所以当我在input中写一些东西时，它由useState变量控制，在空格键后，它被添加到一个带有标签的数组中。空格键后，输入必须清除，但什么也没发生
我的代码现在是这样的：

const addTag = value => {
setText(value.target.value)
if (value.keyCode === 32) {
setTags([...tags, text])
setText('')
}
}

在早期版本中：

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>

此外，我认为尝试通过useEffect设置文本是个好主意，所以我进行了实验，并添加了最后一个函数：

useEffect(() => {
setText('')
}, [tags])

有人能告诉我我做错了什么吗？为什么我在按下"后无法清除textArea；空间"；？

Answer 1

这可能是因为您没有将onChange道具传递给TextArea，因此它不处于受控模式，并且忽略了您传递给它的value道具

<TextArea value={text} onChange={() => {}} className='big-text-area tag-text-area' placeholder='Enter a tag...' onKeyDown={addTag} />

或者您可以在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);
}
}

并像这个一样离开TextArea

<TextArea value={text} onChange={onChange} className='big-text-area tag-text-area' placeholder='Enter a tag...' />

Answer 2

添加event.persist((；对我清除文本区域很有用，关于标签列表，它完全取决于您的初始状态以及如何使用标签数组进行管理。

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} />

Answer 3

我解决了任务。我无法控制组件，因为它被包裹在Form.Item中，Item有自己的状态，所以直接控制Input会干扰。以下是变化：

<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('')
}
}