javascript - 需要设置下拉值并根据初始下拉选择禁用

我有一个包含 3 个选项的配置组件。

第一个下拉菜单包含 3 个选项。每当用户选择选项 Emulator 时，我都需要将其他两个下拉菜单的值设置为 none 并禁用它们。

我正在尝试使用钩子(Hook)来完成，但我不确定该怎么做。

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import "antd/dist/antd.css";
import { Row, Col, Modal } from "antd";
import AntCollapse from "./CustomCollapse";

const Body = styled.div`
  background-color: #f7f7f7;
`;

function warningShared() {
  Modal.warning({
    title: "Unsupported Configuration",
    content: (
      <div>
        <p>You cannot select shared options for an Emulator</p>
      </div>
    ),
    onOk() {}
  });
}

function warningStorage() {
  Modal.warning({
    title: "Unsupported Configuration",
    content: (
      <div>
        <p>You cannot select storage options for an Emulator</p>
      </div>
    ),
    onOk() {}
  });
}

const ConfigurationOptions = () => (
  <AntCollapse header="Membership Options">
    <Body>
      <h1>Game Membership Configurator</h1>
      <Row>
        <Col span={12}>
          <h3>Perks Configuration</h3>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <p>Game Console</p>
        </Col>
        <Col span={4} offset={8}>
          <select
          onChange={warningShared}
          >
            <option>None</option>
            <option onSelect={null}>Emulator</option>
            <option onSelect={null}>Xbox</option>
            <option onSelect={null}>PlayStation</option>
          </select>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <p>Perks #1: Storage</p>
        </Col>
        <Col span={4} offset={8}>
          <select>
            <option>None</option>
            <option onSelect={null}>Basic</option>
            <option onSelect={null}>Advanced</option>
          </select>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <p>Perks #2: Shared Accounts</p>
        </Col>
        <Col span={4} offset={8}>
          <select>
            <option>None</option>
            <option onSelect={null}>1 shared</option>
            <option onSelect={null}>5 shared</option>
            <option onSelect={null}>10 shared</option>
          </select>
        </Col>
      </Row>
    </Body>
  </AntCollapse>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<ConfigurationOptions />, rootElement);

最佳答案

最基本的答案是，这是 React 的工作 setState钩子(Hook)，它允许您在组件范围内存储一个不断变化的值，以便您可以引用和使用它。

这是实现此功能的代码版本:

注意:

ConfigurationOptions组件的范围现在有一个概念 selectedConsole和一种方法 setSelectedConsole .
选择操作已移至 <select>标签，它使用(新)value <option> 上的属性s，而不是每个 <option>试图处理自己的点击事件。相关地，每个 select 的值组现在由 react “控制”，通过 value属性传递到 <select>标签。这与默认的“不受控制”行为相反，其中 select组在内部跟踪自己的状态。
<select>还容纳了一个 disabled属性，您可以像这样链接到控制台值:<select disabled={selectedConsole === "emulator"}> .这不会产生非常明显的禁用样式更改，但您会注意到那些后续的选择字段不再起作用。要添加禁用的样式，您可以使用相同的技巧来添加自定义 css className当<select>被禁用。

编辑:更新沙箱以包括清除其他选择。

关于javascript - 需要设置下拉值并根据初始下拉选择禁用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57329753/

javascript - 需要设置下拉值并根据初始下拉选择禁用

上一篇：javascript - 是的 JS 验证模式依赖项

下一篇：javascript - Promise 中的 Testcafe Runner