React：如何清除 TextArea？

Question

我知道如何控制输入组件。但这种行为我完全不明白。
我有 antd 表单，里面有 textarea。

<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。因此，当我在输入中写一些东西时，它由 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设置文本是个好主意，所以我实验并添加了最后一个func：

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

谁能告诉我我做错了什么？为什么我按空格后无法清除textArea？

Answer 1

我完成了任务。我无法控制组件，因为它被包裹在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('')
  }
} 

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

这可能与您没有将 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...' />