Onchange 事件从未使用 JSX 中的选择控件触发答案

【问题标题】：Onchange event never triggered using select control in JSXOnchange 事件从未使用 JSX 中的选择控件触发
【发布时间】：2021-06-10 16:38:44
【问题描述】：

我正在使用 React 尝试使用功能组件中的 Select 控件触发 onChange 事件。问题是当我选择任何可用选项时，永远不会触发 onChange 侦听器方法，这是我的代码：

import React, { useState } from 'react';
import './ExpensesFilter.css';

const ExpensesFilter = (props) => {
  const [year, setYear] = useState('');

  const yearChangeHandler = (event) => {
    /* setYear actualiza, por medio de useState, 
    a year de manera asincrona, useState es un hooks
     */
    setYear(event);
    console.log("the user is filtering by year");
    console.log("year selected: "+year);
  };

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

export default ExpensesFilter;

这个组件是这样实现的：

import React, { useState } from 'react';
import './Expenses.css';
import ExpenseItemV3 from './ExpenseItemV3';
import Card from '../UI/Card';
import ExpenseFilter from './NewExpense/ExpensesFilter';

const Expenses = (props) => {

    return (
        <div>
            <Card className="expenses">
                <div>
                    <ExpenseFilter />
                    <ExpenseItemV3
                        title={props.records[0].title}
                        amount={props.records[0].amount}
                        date={props.records[0].date}>
                    </ExpenseItemV3>
                </div>
                ...

到目前为止，我没有想法，非常感谢您的 cmets，非常感谢

【问题讨论】：

标签： javascript reactjs jsx onchange

【解决方案1】：

要设置所选选项的值，您必须达到事件目标值并将值设置为选择标签，如下所示：

setYear(event.target.value);
<select value={year} onChange={yearChangeHandler}>

【讨论】：

非常感谢@Marian 的提示，但是，在 setYear 之后仍然无法输出两个 console.log 行，我错过了什么？

【解决方案2】：

只需在 select 标签和 onChange 方法中添加 value={year}，将 year 设置为 event.target.value。此外，年份的日志语句应该在 onChange 处理程序之外。对我有用。

【讨论】：

知道了，我会试试 console.log 行的位置