React中如何通过函数修改CSS属性 点击按钮切换textarea可见性

给按钮绑定点击事件，在事件回调中修改textarea的visibility属性即可实现需求，以下是可直接运行的完整示例：

<!-- 基础页面结构 -->
<button id="switchBtn">切换文本框显示状态</button>
<textarea id="textArea" rows="6" cols="40" style="visibility: visible;">
默认展示的文本内容
</textarea>

<script>
// 获取对应DOM元素
const switchBtn = document.getElementById('switchBtn')
const targetTextarea = document.getElementById('textArea')

// 绑定点击事件触发切换逻辑
switchBtn.addEventListener('click', () => {
  // 判断当前可见性，执行相反操作
  targetTextarea.style.visibility = targetTextarea.style.visibility === 'visible' 
    ? 'hidden' 
    : 'visible'
})
</script>

补充说明：

• visibility: hidden的特性是元素隐藏后仍会保留原本在页面中占据的布局空间，如果你需要隐藏后元素不占位置，可以将visibility属性替换为display，对应属性值修改为none（隐藏）和block（显示）即可
• 若需要初始状态下textarea为隐藏状态，直接修改textarea标签的行内样式为style="visibility: hidden"即可
• 如果你使用jQuery框架，逻辑可以简化为：

  $('#switchBtn').click(function() {
    $('#textArea').css('visibility', (_, oldVal) => oldVal === 'visible' ? 'hidden' : 'visible')
  })
  

内容的提问来源于stack exchange，提问作者Code