React Native中如何获取input输入值并通过按钮触发函数弹出alert？

下面提供两种常用的原生JS实现方案： #

方案1：行内事件绑定（适合简单场景，快速实现） #

直接在按钮上绑定点击事件触发函数，示例代码如下：

<!-- 输入框设置唯一id，用于后续获取元素 -->
<input type="text" id="myInput" placeholder="请输入内容">
<!-- 按钮绑定click事件，点击时触发showInputValue函数 -->
<button onclick="showInputValue()">提交</button>

<script>
function showInputValue() {
  // 获取输入框元素
  const input = document.getElementById('myInput')
  // 读取输入框内容并弹窗
  alert(input.value)
  // 可选：弹窗后清空输入框
  // input.value = ''
}
</script>

方案2：事件监听绑定（更推荐，便于后续功能扩展和维护） #

通过addEventListener绑定事件，避免行内事件污染，示例代码如下：

<input type="text" id="myInput" placeholder="请输入内容">
<button id="submitBtn">提交</button>

<script>
// 等待页面DOM渲染完成后再绑定事件，避免获取元素为空
document.addEventListener('DOMContentLoaded', () => {
  const submitBtn = document.getElementById('submitBtn')
  const input = document.getElementById('myInput')
  
  submitBtn.addEventListener('click', () => {
    alert(input.value)
  })
})
</script>

注意事项 #

• 如果你的输入框包裹在form表单标签内，点击按钮会触发表单默认提交跳转，需要在事件回调里阻止默认行为：

submitBtn.addEventListener('click', (e) => {
  // 阻止表单默认提交
  e.preventDefault()
  alert(input.value)
})

• 如果你把JS代码写在head标签内，必须用DOMContentLoaded事件包裹逻辑，否则DOM还没渲染完成会获取不到输入框、按钮元素。

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