Reactjs 在受控选择字段上未触发更改时作出反应

下面的代码似乎正确，但没有按预期工作

import React, {useEffect, useState} from "react"
import ReactDOM from "react-dom"

const Page = (props) => {
    const [selectedValue, setSelectedValue] = useState(0)

    const handleChange = () => {
        console.log(1)
    }

    useEffect(() => {
        setTimeout(() => {
            setSelectedValue(2)
        }, 1500)
    }, [])

    return (
        <div>
            <select onChange={handleChange} value={selectedValue}>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
     )
}

ReactDOM.render(
    <Page />,
    document.getElementById('pageRoot')
)

import React，{useffect，useState}来自“React”
从“react dom”导入react dom
常量页面=（道具）=>{
常量[selectedValue，setSelectedValue]=useState（0）
常量handleChange=（）=>{
控制台日志（1）
}
useffect（（）=>{
设置超时（（）=>{
设置选定值（2）
}, 1500)
}, [])
返回(
1.
2.
)
}
ReactDOM.render(
,
document.getElementById（'pageRoot'）
)

---

因此，当页面在1.5秒后加载时，它会选择第二个选项，但不会触发onChange，因为控制台中没有记录任何内容。

我猜是因为当元素失去焦点时会发生onChange，所以在通过编程更改此选项时，聚焦永远不会发生。

我猜它的作用是什么，因为当元素失去聚焦时，会发生onchange，所以当以编程方式更改时，聚焦永远不会发生。

以编程方式设置状态不能触发

onchange

处理程序，否则我们会发现自己处于一个无限循环中，有以下组件：

const Page = (props) => {
  const [selectedValue, setSelectedValue] = useState(0)

  const handleChange = (e) => {
    setSelectedValue(e.target.value)
    console.log(1)
  }

  useEffect(() => {
    setTimeout(() => {
      setSelectedValue(2)
    }, 1500)
  }, [])

  return (
    <div>
      <select onChange={handleChange} value={selectedValue}>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  )
}

---

以编程方式设置状态不能触发

onChange

处理程序，否则我们会发现自己处于一个无限循环中，有以下组件：

const Page = (props) => {
  const [selectedValue, setSelectedValue] = useState(0)

  const handleChange = (e) => {
    setSelectedValue(e.target.value)
    console.log(1)
  }

  useEffect(() => {
    setTimeout(() => {
      setSelectedValue(2)
    }, 1500)
  }, [])

  return (
    <div>
      <select onChange={handleChange} value={selectedValue}>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  )
}

---

您希望onChange通过单击“选项”触发，还是希望它自动触发？@OnUrltan我希望onChange每次在下拉菜单中更改所选选项时都会触发，无论是通过编程还是用户手动更改。我在codeSandbox中尝试了它，它预期会工作@OnUrltan我在控制台中未看到任何登录内容，是吗？仅当手动使用“选择”下拉列表时才会记录，但在1.5秒后的初始页面加载时，即使选择了第二个选项，也不会记录任何内容。每次选择未选择的选项时，它都会打印一个，您可以看到演示下面的控制台选项卡。您希望onChange通过单击“选项”触发，还是希望它自动触发？@onuriltan我希望onChange每次在下拉列表中更改所选选项时都触发，无论是通过编程还是用户手动更改。我在codeSandbox中尝试了它，它预期会在@onuriltan I中工作在控制台中看不到任何日志，是吗？仅当手动使用“选择”下拉列表时，它才会记录，但在1.5秒后的初始页面加载时，即使选择了第二个选项，也不会记录任何内容。每次选择未选择的选项时，它都会打印一个，您可以看到演示下面的控制台选项卡