如何在React（Next.js）中获取textarea与下拉选择框的值？

你的代码里有几个关键问题导致无法正确获取表单值：

1. 状态更新的键名错误：你用了[e.target.msg]和[e.target.country]，但这两个属性根本不存在，应该用表单元素的name属性作为state的键，也就是[e.target.name]。
2. 字段名不匹配：textarea的name是msgs，但你在提交时取的是state.msg，字段名不一致。
3. 未阻止表单默认提交行为：点击提交按钮后页面会刷新，导致state被重置，无法正确获取值。

修复后的完整代码如下：

// 假设你用useState管理状态，初始值要包含对应字段
const [state, setState] = useState({
  country: '',
  msgs: ''
});

// 统一复用一个change处理函数，减少冗余
const handleInputChange = (e) => {
  const { name, value } = e.target;
  setState(prevState => ({
    ...prevState,
    [name]: value
  }));
};

const handleSubmit = (e) => {
  // 阻止表单默认提交刷新页面
  e.preventDefault();
  // 正确获取对应字段值
  alert(`msg is ${state.msgs}, country is ${state.country}`);
};

return (
  <form className='row' onSubmit={handleSubmit}>
    <select 
      className="form-select" 
      aria-label="Default select example" 
      onChange={handleInputChange} 
      name="country"
      value={state.country} {/* 绑定value，转为受控组件 */}
    >
      <option value="">Country</option> {/* 给默认选项设置空值，避免无效选中 */}
      <option value="abc">abc</option>
      <option value="xyz">xyz</option>
    </select>
                
    <textarea 
      onChange={handleInputChange} 
      name="msgs"
      value={state.msgs} {/* 绑定value，转为受控组件 */}
    ></textarea>
    <input type="submit" value="send" className='sendbtn' /> 
  </form>
);

额外说明：

• 合并两个change函数，所有表单元素只要设置正确的name就能复用这个函数，减少重复代码。
• 给表单元素加上value绑定，将它们转为受控组件，确保state和表单值始终同步，避免值不一致的情况。
• 默认选项设置空值value=""，让初始state.country为空字符串，符合逻辑且能正确触发后续选择事件。

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