时间戳

首页 > 解决方案 > 选择选项时反应中的标记不会改变我的反应应用程序（名为 <Dropdown/>）中有这个组件，其中有一个 <select> 标记。在大多数情况下，一切正常，但是每当我选择其中一个选项时，而不是让 <select> 更改并显示选择的选项，它只是默认恢复为原始值。我不知道发生了什么，我们将不胜感激。从“反应”导入反应；导入“./Dropdown.css”；导出默认函数 Dropdown(props) { let flavorTexts = props.data

问题描述

标签： javascriptreactjs

解决方案

您需要在您的选择标签上使用价值，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>
    );
}

selected 参数应该来自你的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 的文档有这个例子：文档

推荐阅读