ReactJS中如何根据单选按钮输入填充文本框值

嘿，这个需求挺常见的，我给你写个原生HTML+JavaScript的实现方案，直接就能用，不需要依赖任何框架~

1. 先写HTML结构 #

我们需要一组单选按钮和一个用来展示结果的文本框：

<!-- 单选按钮组 -->
<div class="radio-group">
  <input type="radio" name="selection" id="opt-yes" value="yes">
  <label for="opt-yes">Yes</label>
  
  <input type="radio" name="selection" id="opt-no" value="no">
  <label for="opt-no">No</label>
</div>

<!-- 目标文本框 -->
<input type="text" id="result-input" readonly placeholder="选择一个选项看看">

注意：单选按钮的name属性必须相同，这样它们才会被识别为同一组，只能选中一个；文本框加了readonly是为了防止用户手动修改，如果你需要允许编辑，可以去掉这个属性。

2. 编写JavaScript逻辑 #

接下来监听单选按钮的选中状态变化，根据选中的值更新文本框内容：

// 获取所有单选按钮和文本框元素
const radioOptions = document.querySelectorAll('input[name="selection"]');
const resultInput = document.getElementById('result-input');

// 给每个单选按钮绑定change事件
radioOptions.forEach(radio => {
  radio.addEventListener('change', function() {
    // 判断当前选中的值，设置文本框内容
    if (this.value === 'yes') {
      resultInput.value = 'This is from yes';
    } else if (this.value === 'no') {
      resultInput.value = 'This is from no';
    }
  });
});

3. 可选优化：页面加载时默认赋值 #

如果你的单选按钮有默认选中项，想要页面一加载就显示对应文本，可以加上这段代码：

// 页面加载完成后检查默认选中的选项
document.addEventListener('DOMContentLoaded', function() {
  const defaultSelected = document.querySelector('input[name="selection"]:checked');
  if (defaultSelected) {
    resultInput.value = defaultSelected.value === 'yes' 
      ? 'This is from yes' 
      : 'This is from no';
  }
});

这样就完成啦！你可以直接把这些代码复制到HTML文件里运行，测试一下效果~

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