如何獲取 select 表單元素的值？

Question

我正在嘗試在表單中填充 select 列表下拉列表，其中包含來自我的動作創建者中的 axios 調用的結果。 該調用在我的 redux 存儲中填充一個（子）對象，然后用於填充列表。 它工作正常，但我無法獲取默認列表項的值，即未觸發 onchange 事件時列表項的值。

目前，由 selectedProject 控制的 value 屬性似乎根本沒有影響。 IE selectedProject 仍然是一個空字符串，但 select 列表中的第一項是 redux 存儲中的第一項。

如果用戶單擊下拉菜單並觸發 onChange，它可以正常工作，但是在許多情況下用戶選擇了默認值。 我怎么才能得到它？

非常感謝您的閱讀！

到目前為止，我的代碼是：

  const { projects, newProject } = useSelector((state) => state.project)
  const [selectedProject, setSelectedProject] = useState('')

  useEffect(() => {
    dispatch(getProjects())
  }, [dispatch])

  const handleNavigate = (e) => {
    e.preventDefault()
    navigate(`/project/${selectedProject}`)
  }

return (
    <>
      {projects && (
        <>
          <form onSubmit={handleNavigate}>
            <select
              name='projects'
              id='project-list'
              onChange={(e) => setSelectedProject(e.target.value)}
              value={selectedProject}
            >
              {projects.map((project) => (
                <option key={project._id} value={project.title}>
                  {project.title}
                </option>
              ))}
            </select>
            <button>Go!</button>
          </form>
        </>
      )}
</>)

Answer 1

由於您的select輸入由selectedProject控制，這意味着 state 的值是多少，即select輸入的值。 在您的情況下，state 的初始值是一個空字符串，這是事實上的值。

您期望 React 自動將 select projects列表中的第一個元素作為您的第一個值。 這不是select元素和反應的工作方式。 即使除了 React，事情也不是這樣運作的。

看到這一點的正確方法是始終依賴您為value屬性分配的 state。 這是您的代碼的更正版本：

const { projects, newProject } = useSelector((state) => state.project);
const [selectedProject, setSelectedProject] = useState('');

useEffect(() => {
  dispatch(getProjects());
}, [dispatch]);

useEffect(() => {
  if(projects && projects.length !== 0 && selectedProject !== '') {
    setSelectedProject(projects[0].title)
  }
}, [projects])

const handleNavigate = (e) => {
  e.preventDefault();
  navigate(`/project/${selectedProject}`);
};

在上面的代碼中，當從 redux 檢索projects state 時，將selectedProject設置為數組的第一個元素。