我正在尝试在 React 中创建一个选择组件，但 onChange 侦听器不起作用答案

【问题标题】：I'm trying to make a select component in React but onChange listener is not working我正在尝试在 React 中创建一个选择组件，但 onChange 侦听器不起作用
【发布时间】：2022-01-12 12:39:38
【问题描述】：

我想在我的表单中创建一个选择国家组件，但在我的<select> onChange 监听器由于某种原因无法正常工作

<Form.Group className="form-group">
       <Form.Label htmlFor="country">Country</Form.Label>
        <div className="form-control-wrap">
             <select className="form-select form-select-lg" id="country" name="country"
                    onChange={e => console.log("Changed")}>
                    <option value={"select-country"}>Select Country</option>
                    {
                       countries.map((c) => {
                             return (<option value={c.name}>{c.name}</option>)})}
            </select>
       </div>
</Form.Group>

当我选择一个国家/地区时，控制台上应该打印“已更改”时没有打印任何内容

【问题讨论】：

标签： reactjs select onchange

【解决方案1】：

我不确定问题是什么，它有效。你能创建一个这样的代码片段来重现你的错误吗？

const countries = [{ name: 'germany' }];

const App = () => {
 return (
    <select className="form-select form-select-lg" id="country" name="country"
      onChange={e => console.log("Changed")}>
          <option value="select-country">Select Country</option>
          {countries.map((c) => <option value={c.name}>{c.name}</option>)}
    </select>
  )
};
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app">hi</div>

【讨论】：