ReactJS：无法从选择下拉列表中获取值，因为该值未定义答案

【问题标题】：ReactJS: Unable to get the value from a select dropdown because the value is undefinedReactJS：无法从选择下拉列表中获取值，因为该值未定义
【发布时间】：2022-11-29 06:31:40
【问题描述】：

我只是想做一个概念证明，根据用户的搜索文本和他们从下拉列表中选择的选项，它将把他们重定向到他们选择的搜索引擎。

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 [selection, setSearch] = useState("");


const doSearch = event => {
  event.preventDefault();
  var sf=document.searchform;
  var submitto = sf.sengines[sf.sengines.selectedIndex].value + (sf.searchterms.value);
  console.log("log: " + submitto);
  window.location.href = submitto;
  //window.location.replace(submitto)
  return null;
}

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 id="sengines" options={options}/>
        For:
        <input type="text" name='searchTerms'/>
        <input type="submit" name="SearchSubmit" value="Search"></input>
        </form>
      </header>
    </div>
  );
}

当我点击搜索时，它会抛出一个错误，指出 selectedIndex 未定义。是否存在我没有意识到的语法错误？

【问题讨论】：

标签： javascript reactjs dropdown

【解决方案1】：

我认为错误可能是你正在做的事情

var sf=document.searchform;

要通过名称获取表单元素，请尝试执行

var sf = document.getElementsByName("searchForm")[0];

【讨论】：

那不是引发错误的地方。它发生在上线之后。我有点警惕地查看它是否可以按照我编写的方式找到搜索并且它有效。

【解决方案2】：

这个问题比我意识到的更容易解决。

sf.searchTerms.value

需要驼峰式

【讨论】：