ReactJS中如何实现Select onChange时跳转至对应值链接？

我帮你找出代码里的几个问题，咱们一步步调整：

问题1：错误的取值方式 #

你在onChange里用this.value是拿不到选中值的——因为箭头函数里的this指向的是你的React组件实例，不是select这个DOM元素。正确的做法是通过事件对象e获取选中值：e.target.value。

问题2：option的value属性错误包裹 #

你写了value="{page.slug}"，这会把字符串"{page.slug}"当作选项的值（而不是page.slug的实际内容），应该去掉引号，直接用JSX表达式传递：value={page.slug}。

修正后的完整代码 #

render() {
  return (
    <select onChange={(e) => {
      const selectedValue = e.target.value;
      if (selectedValue) {
        window.location.href = selectedValue;
      }
    }}>
      <option value="">Please select</option>
      {pages.map(({ node: page }) => (
        <option key={page.id} value={page.slug}>{page.title}</option>
      ))}
    </select>
  );
}

额外说明 #

• 我把选中值存到变量selectedValue里，让逻辑更清晰，也方便后续调试。
• 跳转前判断值是否为空，避免用户选“Please select”时触发无效跳转。

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