时间戳

首页 > 解决方案 > React.js 更改下拉值

javascript - React.js 更改下拉值

问题描述

我正在尝试使用 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>
)
}

标签： javascriptreactjsreact-hooksuse-state

解决方案

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

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

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

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

推荐阅读