ReactJS问题：无法获取下拉选择框值，selectedIndex未定义

错误原因 #

你代码里用的<Select>是React组件（大概率是react-select库的组件），并非原生HTML的<select>标签。原生<select>才自带selectedIndex属性，但React Select组件渲染出的DOM结构和原生完全不同，所以通过document.searchform.sengines获取到的元素没有selectedIndex属性，才会触发报错。另外还有个细节问题：你获取输入框值时用了sf.searchterms.value，但输入框的name是searchTerms（JS对大小写敏感），这会导致无法正确获取输入值。

修复方案 #

方案1：改用原生HTML <select> 标签 #

如果不需要React Select的复杂功能，直接用原生select更简单，代码修改如下：

const options = [
  { value: 'http://www.google.com/search?q=', label: 'Google' },
  { value: 'http://search.yahoo.com/search?p=', label: 'Yahoo' },
  { value: 'https://www.bing.com/search?q=', label: 'Bing' },
  { value: 'https://duckduckgo.com/?q=', label: 'DuckDuckGo' }
]

const doSearch = event => {
  event.preventDefault();
  const sf = document.searchform;
  const searchValue = sf.searchTerms.value.trim();
  if (!searchValue) return;
  const selectedEngine = sf.sengines[sf.sengines.selectedIndex].value;
  // 用encodeURIComponent处理搜索词，避免特殊字符破坏URL
  const submitto = selectedEngine + encodeURIComponent(searchValue);
  console.log("log: " + submitto);
  window.location.href = submitto;
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Search:</p>
        <form name="searchform" onSubmit={doSearch}>
          {/* 替换为原生select标签 */}
          <select id="sengines" name="sengines">
            {options.map((opt, index) => (
              <option key={index} value={opt.value}>{opt.label}</option>
            ))}
          </select>
          For:
          <input type="text" name='searchTerms' />
          <input type="submit" name="SearchSubmit" value="Search" />
        </form>
      </header>
    </div>
  );
}

方案2：用React状态管理（推荐，符合React开发思维） #

如果要继续使用React Select组件，应该通过React状态跟踪选中的引擎和输入值，而非直接操作DOM，代码示例：

import { useState } from 'react';
import Select from 'react-select'; // 确保已安装并导入react-select

const options = [
  { value: 'http://www.google.com/search?q=', label: 'Google' },
  { value: 'http://search.yahoo.com/search?p=', label: 'Yahoo' },
  { value: 'https://www.bing.com/search?q=', label: 'Bing' },
  { value: 'https://duckduckgo.com/?q=', label: 'DuckDuckGo' }
]

function App() {
  const [selectedEngine, setSelectedEngine] = useState(null);
  const [searchValue, setSearchValue] = useState('');

  const doSearch = (event) => {
    event.preventDefault();
    if (!selectedEngine || !searchValue.trim()) return;
    const submitto = selectedEngine.value + encodeURIComponent(searchValue.trim());
    console.log("log: " + submitto);
    window.location.href = submitto;
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Search:</p>
        <form onSubmit={doSearch}>
          <Select 
            value={selectedEngine}
            onChange={setSelectedEngine}
            options={options}
            placeholder="选择搜索引擎"
          />
          For:
          <input 
            type="text" 
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
          />
          <input type="submit" value="Search" />
        </form>
      </header>
    </div>
  );
}

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