onClick 事件监听器不工作不知道为什么

Question

I've been trying to log my event object value in 'option' tag and it does not work, but it does work in select tag, here is my code:

{data.map((item, index) => {
      const {name, options} = item;
          return (
              <div className="item" key={name}>
                  <label htmlFor={name}>
                      Select any {name}:
                      <select name={name} id={name} onClick={(e) => console.log(e.target.value)}>
                          <option disabled selected>Any {name}</option>
                          {options.map((item, index) => {
                              return (
                                  <option 
                                      value={item} 
                                      key={index} 
                                      onClick={(e) => console.log(e.target.value)}
                                  >{item}</option>
                              )
                          })}
                      </select>
                  </label>
              </div>
          )
      })}

what's wrong with my option tag?

Answer 1

I don't think there is anything wrong with your option tag. Did you encounter this issue in Chrome?

This seems to be a known issue in Chrome: The onclick event does not work for options

Indeed, I tried onClick with both Chrome and Firefox - for the option tag, onClick does fire in Firefox but not in Chrome.