React <select> 的 <option> 在 onClick 上不起作用答案

【问题标题】：React <select>'s <option> is not working at onClickReact <select> 的 <option> 在 onClick 上不起作用
【发布时间】：2021-05-08 09:45:55
【问题描述】：

我需要一个函数在这里。我想访问选项值。

 const region = ['Africa','America','Asia','Europe','Oceania'];
    <div className="options">
                <select>
                <option>Select a Region</option>
              {region.map((nameOfRegion) => {
               return <option onClick={() => requestRegion(nameOfRegion)}>
               {nameOfRegion}
               </option>
              })}
            </select>

这个函数没有记录选项

const requestRegion = (region) => {
    console.log(region)
}

【问题讨论】：

标签： javascript html reactjs jsx

【解决方案1】：

在<select> 上使用onChange 事件：

  const requestRegion = (event) => {
     console.log(event.target.value);
  };

  return (
      <div className="options">
        <select onChange={requestRegion}>
          <option>Select a Region</option>
           {
             region.map((nameOfRegion) => (<option>{nameOfRegion}</option>))
           }
        </select>
     </div>

【讨论】：

【解决方案2】：

因为option 标签既不支持onSelect() 也不支持onClick() 事件。所以在这种情况下你可以在select标签中使用onChange：

const onChange =(e) => {
  console.log(e.target.value);
}

<select name="select" onChange = {onChange}>
      <option>Select a Region</option>
      {region.map((nameOfRegion, i) => {
        return (
          <option key={i}>
            {nameOfRegion}
          </option>
        );
      })}
    </select>

注意：使用map时需要在子标签中添加key

【讨论】：

【解决方案3】：

您应该在select 元素上使用onChange 处理程序，并从更改事件中获取值：

const Demo = ({ regions }) => {
  const requestRegion = e => {
    console.log(e.target.value)
  }

  return (
    <select onChange={requestRegion}>
      <option>Select a Region</option>
      {regions.map(region => (
        <option key={region}>{region}</option>
      ))}
    </select>
  )
}

const regions = ['Africa','America','Asia','Europe','Oceania']

ReactDOM.render(
  <Demo regions={regions} />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：