React.js 更改下拉值答案

【问题标题】：React.js to change dropdown valueReact.js 更改下拉值
【发布时间】：2023-03-21 09:02:01
【问题描述】：

我正在尝试使用 React useState 更改下拉值的值，但看起来它在调用 onClick 后刷新了页面。例如，当我单击选项 B 时，它会将 selectedValue 状态更改为 B，然后重新渲染页面并将其重置为默认值。我的问题是为什么它重新呈现页面？以及如何更改下拉值？

import React, {useState}  from 'react';

function InputDropdown(props) {

const [selectedValue, setSelectedValue] = useState("");

return (
  <div className="input-group">
    <input type="text" className="form-control" />
    <div className="input-group-append">
      <button type="button" className="btn btn-outline-secondary">{selectedValue}</button>
      <button type="button" className="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
        <span className="sr-only">Toggle Dropdown</span>
      </button>
      <div className="dropdown-menu">
        <a class="dropdown-item" href="#" onClick={() =>setSelectedValue("A")}>A</a>
        <a class="dropdown-item" href="#" onClick={() =>setSelectedValue("B")}>B</a>
        <a class="dropdown-item" href="#" onClick={() =>setSelectedValue("C")}>C</a>
      </div>
    </div>
  </div>
)
}

【问题讨论】：

标签： javascript reactjs react-hooks use-state

【解决方案1】：

在 React 中，如果任何状态值发生变化，组件将被重新渲染。这就是您的新状态值将在页面上刷新的原因。

在您的示例中，selectedValue 开头为空。

当您选择一个值时，您调用了setSelectedValue()（请注意您的选项 B 值是 C 可能是一个错误）

它改变了selectedValue 本地状态的值，组件重新渲染。这就是重新渲染后，按钮上的值更改为您选择的值的原因。

【讨论】：