用 React 更新 <select>

Question

我有一个可以 select 编辑的标签 select，但我确实有一个应该更新选项的下一个和上一个按钮。

我尝试在每次单击按钮时使用 sort() 来做到这一点，但是当我 select 选择该选项然后使用下一步按钮时，select 不再更新。

如何使用状态动态更新 select 选项并使其正常工作？

组件Select

export default function RegistroNavSelect(props) {

      const atualizarLista = (e) => {
        props.setPeriodo(e.target.value)
      }
      return (
          <select id="periodoSelec" className="registro__nav--select" name="select" onChange={e => atualizarLista(e)}>
            {props.lista?.map((periodo, index) => {
              return (<option key={index} value={periodo}>{periodo}</option>)
            })}
          </select>
        );
    }

组件导航

export default function RegistrosNav(props) {
  const periodos = props.lista
  const index = props.lista.indexOf(props.periodo)

  const setNav = (direcao) => {
    if(direcao){
      props.setPeriodo(periodos[index-1])
    }
    if(!direcao){
      props.setPeriodo(periodos[index+1])
    }
  }
  return <>
    <div className="registro__nav">
    <FontAwesomeIcon onClick={e => setNav(false)} className="registro__nav--icon" icon={faChevronLeft}/>
    <div>
      Período
      <RegistroNavSelect periodo={props.periodo} lista={props.lista} setPeriodo={props.setPeriodo}/>
     </div>
     <FontAwesomeIcon onClick={e => setNav(true)} className="registro__nav--icon" icon={faChevronRight}/>
    </div>
  </>;

Answer 1

您必须确保您的 <select> 是受控组件。因此，您应该将 value 作为属性包含在 select 元素中。我假设 setPeriodo 来自 useState 调用，元组的另一部分是 periodo。因此，您需要将 periodo 作为道具传递给 RegistroNavSelect，结果 select 行应该是：

<select id="periodoSelec" className="registro__nav--select" name="select" onChange={e => atualizarLista(e)} value={periodo}>

用 React 更新 <select>

Update a <select> with react

javascript

reactjs

use-state

组件Select

组件导航