如何修改react-timezone-select的onChange方法添加console.log打印

错误原因 #

react-timezone-select 的 onChange 回调会自动传入当前选中的时区对象作为参数，你之前的写法没有接收这个参数，直接将 state 中未更新的旧时区值重新赋值，所以导致组件选择功能失效。

正确实现 #

你只需要在自定义的 onChange 回调中接收选中的时区参数，先执行打印逻辑，再将参数传入 state 更新方法即可，修改后的核心代码如下：

<TimezoneSelect
  value={selectedTimezone}
  onChange={(newTimezone) => {
    // 自定义打印逻辑
    console.log('新选中的时区信息：', newTimezone)
    // 保持原有状态更新逻辑
    setSelectedTimezone(newTimezone)
  }}
/>

完整修改后的示例代码：

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import TimezoneSelect from 'react-timezone-select'

const App = () => {
  const [selectedTimezone, setSelectedTimezone] = useState({})

  return (
    <div className='App'>
      <h2>react-timezone-select</h2>
      <blockquote>Please make a selection</blockquote>
      <div className='select-wrapper'>
        <TimezoneSelect
          value={selectedTimezone}
          onChange={(newTimezone) => {
            console.log('新选中的时区信息：', newTimezone)
            setSelectedTimezone(newTimezone)
          }}
        />
      </div>
      <h3>Output:</h3>
      <div
        style={{
          backgroundColor: '#ccc',
          padding: '20px',
          margin: '20px auto',
          borderRadius: '5px',
          maxWidth: '600px',
        }}
      >
        <pre
          style={{
            margin: '0 20px',
            fontWeight: 500,
            fontFamily: 'monospace',
          }}
        >
          {JSON.stringify(selectedTimezone, null, 2)}
        </pre>
      </div>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

内容的提问来源于stack exchange，提问作者Hari Krishnan U