如何将select标签的选中属性传递至React组件状态？

要实现select选中值和组件状态的同步，只需给select添加状态更新的事件处理，同时合理初始化状态即可，以下是修正后的实现：

步骤说明 #

• 初始化useState时，可根据需求设置默认选中值，比如默认选中第一个作者，或设置为空字符串确保初始状态合法
• 给select标签添加onChange事件，在选中项变化时调用setAuthor更新状态

完整代码示例 #

const NewTask = ({ authors }) => {
  // 初始化状态：默认选中第一个作者，若无作者则为空字符串
  const [author, setAuthor] = useState(authors[0]?.author_name || '');

  // 处理选中值变化
  const handleAuthorChange = (e) => {
    setAuthor(e.target.value);
  };

  return (
    <select value={author} onChange={handleAuthorChange}>
      {/* 若需要默认提示选项，可添加如下空选项 */}
      {/* <option value="">选择作者</option> */}
      {authors.map((item) => (
        <option key={item.author_name} value={item.author_name}>
          {item.author_name}
        </option>
      ))}
    </select>
  );
};

关键说明 #

• onChange事件通过e.target.value获取当前选中的选项值，调用setAuthor更新状态
• 遍历authors时，用item代替author避免和状态变量重名，提升代码可读性
• 若authors可能为空数组，初始化状态时用authors[0]?.author_name可选链操作符避免报错

内容的提问来源于stack exchange，提问作者user20984971