React：如何清除 TextArea？

Posted 2023-02-23

【中文标题】React：如何清除 TextArea？

【英文标题】：React: How to clear TextArea?

【发布时间】：2021-12-28 16:39:33

【问题描述】：

我知道如何控制输入组件。但这种行为我完全不明白。 我有 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？

【参考方案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('')
  
 

【参考方案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 />

【讨论】：

不幸的是，它对我不起作用，因为它在数组中添加了最后一个符号（这个符号是“空格”）。

嗨，很高兴看到您现在已经解决了问题，我也更新了答案，现在它会在您按下空格时立即更新列表并提供正确的值。

【参考方案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...' />

【讨论】：

我“像在教程中一样”编写代码（参见我的代码的早期版本）。但主要的麻烦是onChange中的setText()，它在onKeyDown之后调用，所以我的变量用旧值重写。

您是否尝试过像我在答案中写的那样使用空的onChange？

我尝试了两种变体。

我编辑了答案，你试过了吗？

我都试过了。