我怎样才能让我的按钮消失？在反应答案

【问题标题】：how can i get my button to disappear? in reactjs我怎样才能让我的按钮消失？在反应
【发布时间】：2022-11-12 10:42:31
【问题描述】：

如果我的文本区域为空，我正试图让我的按钮消失

直到现在我已经为它编写了一些代码，但我仍然做不到

在代码中，我试图通过根据某些三元条件 id 更改 css 来使 css 动态化我的问题是我希望开/关条件仅在文本字段有多个字母（不为空）时才起作用，这将有助于我的发布应用程序，因为它不会发布任何空帖子，而只会发布带有字母和单词的帖子（非空文本区域）将发布

这是代码：

function PostingNow() {
  
  const [post, setPost] = useContext(Mycontext);
  const tw = useRef('')
  const[count,setCount] = useState(false)

  

  return (
    <div >
    
      <textarea  placeholder='whats up?' className="box" ref={tw}></textarea>

      
      
    
      <button className={count?'tweetbutton':'unclickable'} >
        Tweet 
      </button>

      </div>
      
    
      
      
      {post.map((post, i) => (
        <Postingcomponent name ='user name'image={Photo} key={i} postContent={post}/>
        
      ))}
    </div>
  );
}
export default PostingNow

【问题讨论】：

标签： javascript html reactjs react-hooks

【解决方案1】：

您可以有条件地在 jsx 中呈现您的按钮。

首先使您的 textarea 成为受控组件，以便您可以访问其状态。

然后写

{textAreaText && <button ... />}

【讨论】：

PS 你可能不想从 DOM 中删除按钮，而是给它禁用的道具，像这样 <button disabled={textAreaText.length === 0} />

【解决方案2】：

使 textarea 成为受控输入

const [textarea, setTextarea] = useState("")

...

<textarea onChange={e => setTextarea(e.target.value)}>{textarea}</textarea>

然后对于按钮：

{textarea && <button ... />}

为了更好的用户体验，建议禁用按钮而不是从 DOM 中删除它。

<button disabled={!textarea} ... />

【讨论】：

【解决方案3】：

如果您使 TEXTAREA 标记类似于：

<textarea placeholder='whats up?' className="box" ref={tw} class='unclickable' 
        onkeyup="fixPostButton(this, 'postButton', 'unclickable', 'tweetbutton');">

并制作按钮：

<button id="postButton" class="unclickable">Tweet</button>

然后这个javascript将在每次击键后改变类：

<script>
function fixPostButton(txta, butn, isempty, notempty) {
  var classX = (txta.value == '') ? isempty : notempty ;
  document.getElementById(butn).className = classX; }
</script>

【讨论】：