时间戳

首页 > 解决方案 > 在 React 中获取下拉更改的值

reactjs - 在 React 中获取下拉更改的值

问题描述

我有以下代码。最初，当我选择 2022 时，我看不到控制台中记录的值，而且如果我选择 2021，那么“2022”会记录在控制台中。我还尝试通过将初始状态更改为 2022

我尝试了下面的代码，

const [selecteddropdown,setdropdown] = useState(2022);

但仍然没有打印所选值。我需要改变什么？

const Filter = () => {
  const [selecteddropdown,setdropdown] = useState('');
  const handleChange = (event) => {
    setdropdown(event.target.value);
    console.log(selecteddropdown);
  };

  return (
    <div className='expenses-filter'>
      <div className='expenses-filter__control'>
        <label>Filter by year</label>
        <select value={selecteddropdown}  onChange={handleChange}>
          <option value='2022'>2022</option>
          <option value='2021'>2021</option>
          <option value='2020'>2020</option>
          <option value='2019'>2019</option>
        </select>
      </div>
    </div>
  );
};

标签： reactjs

解决方案

您在日志中实际看到的是先前选择的值。如果您遵循@Yoshi 评论的参考，您可以更好地理解为什么会这样。

要修复它，请删除您的console.loginhandleChange方法，而是在下面的代码块中调用它，然后您将看到selecteddropdown.

  useEffect(() => {
    console.log(selecteddropdown);
  }, [selecteddropdown]);

useEffect()在这种情况下，只要更新selecteddropdown状态，钩子就会触发。

推荐阅读