如何获取datalist选项的属性onclick - reactjs

import React, { useState } from 'react';

function MyComponent() {
  const [selectedOption, setSelectedOption] = useState('');

  // 其他组件代码...

  return (
    <div>
      <input list="options" onChange={(e) => setSelectedOption(e.target.value)} />
      <datalist id="options">
        <option value="Option 1" onClick={() => console.log('Option 1 clicked')} />
        <option value="Option 2" onClick={() => console.log('Option 2 clicked')} />
        <option value="Option 3" onClick={() => console.log('Option 3 clicked')} />
      </datalist>
    </div>
  );
}

function MyComponent() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleFormSubmit = (e) => {
    e.preventDefault();
    // 在这里使用selectedOption的值进行其他操作，例如发送到服务器
    console.log('Selected option:', selectedOption);
  };

  return (
    <div>
      <form onSubmit={handleFormSubmit}>
        <input list="options" onChange={(e) => setSelectedOption(e.target.value)} />
        <datalist id="options">
          <option value="Option 1" onClick={() => console.log('Option 1 clicked')} />
          <option value="Option 2" onClick={() => console.log('Option 2 clicked')} />
          <option value="Option 3" onClick={() => console.log('Option 3 clicked')} />
        </datalist>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}