<select> 标签在选择选项时反应不改变答案

【问题标题】：<select> tag in react not changing when selecting option<select> 标签在选择选项时反应不改变
【发布时间】：2020-11-20 16:58:42
【问题描述】：

我的 React 应用程序（名为 <Dropdown/>）中有这个组件，里面有一个 <select> 标记。在大多数情况下，一切正常，但每当我选择其中一个选项时，而不是让 <select> 更改并显示选择的选项，它只是默认恢复为原始值。我不知道发生了什么，我们将不胜感激。

import React from "react";
import "./Dropdown.css";

export default function Dropdown(props) {
    let flavorTexts = props.data;
    return(
        <select className="listDrop" onChange={props.onChange}>
            {flavorTexts.map((entry) => <option className="listElement" value={{lang: entry.language.name, ver: entry.version.name}}>{entry.language.name} — {entry.version.name}</option>)}
        </select>
    );
}

import React, { useState } from 'react';
import '../../App.css'
import Dropdown from '../buttons/Dropdown';

function Search() {
  const [flavorVersion, setFlavorVersion] = useState({lang: 'en', ver: 'x'});

  const versionHandler = (selection) => {
    setFlavorVersion(selection);
  }
(...)
      return (
      <>
        (...)
            {data.description.filter((entry) => entry.language.name === flavorVersion.lang && entry.version.name === flavorVersion.ver).map(entry => <p className="dataEntry">{entry.flavor_text}</p>)}
(...)
        <Dropdown data={data.description} onChange={(e) => versionHandler(e.target.value)}/>
      </>
    )
(...)

【问题讨论】：

您应该向我们展示您的 onChange 函数的作用。
认为它完成了；）

标签： javascript reactjs

【解决方案1】：

你需要在你的选择标签上使用值，value={selected}

import React from "react";
import "./Dropdown.css";


export default function Dropdown(data, onChange, selected) {
    let flavorTexts = data.data;
    console.log('dropdown got: ', flavorTexts);
    return(
        <select className="listDrop" onChange={onChange} value={selected}>
            {flavorTexts.map((entry) => <option className="listElement" value={{lang: entry.language.name, ver: entry.version.name}}>{entry.language.name} — {entry.version.name}</option>)}
        </select>
    );
}

选择的参数应该来自你的state，函数onChange应该控制这个状态

这是一个处理选择输入状态的清晰示例（useEffect 只是看更新状态的结果）

import React, { useState, useEffect } from 'react';

const options = [
  { id: 1, name: 'option 1' },
  { id: 2, name: 'option 2' },
];

export const Form = () => {
  const [form, setForm] = useState({ selected: '' });

  useEffect(() => {
    console.log(form);
  }, [form]);

  const handleChange = e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  };

  const handleSave = () => {};
  return (
    <form onSubmit={handleSave}>
      <div>
        <select name='selected' value={form.selected} onChange={handleChange}>
          <option value=''>Select Option</option>
          {options.map(option => (
            <option key={option.id} value={option.name}>
              {option.name}
            </option>
          ))}
        </select>
      </div>
    </form>
  );
};

React 的文档有这个例子：Documentation

【讨论】：

我很确定我已经看到（并且自己完成了）选择自动将其值分配给所选选项，但是...这是出于某种原因特定于我的代码吗？无论如何，是否有一种最佳实践方法可以从所选选项中获取值以将其分配给<select> 标签？
是的，我会修改我之前的回答给你一个清晰的例子。
在这里得到它，伙计，我的错

【解决方案2】：

我修好了。问题实际上是每次选择更改时我都会重新渲染主要组件，从而重置下拉菜单。 我的错。感谢 XP 的帮助

【讨论】：