Select 依赖 reactjs 和 react-select

Question

我正在用 ReactJS 开发一个应用程序，我有一个页面，我想在其中显示两个 select，一个依赖于另一个。

我正在使用 react-select 和 @material-ui。

在dates中：

[
  {
    "id": 1,
    "name": "202001"
  },
  {
    "id": 2,
    "name": "202002"
  },
  {
    "id": 3,
    "name": "202003"
  },
  {
    "id": 4,
    "name": "202004"
  },
  {
    "id": 5,
    "name": "202005"
  },
  {
    "id": 6,
    "name": "202006"
  },
  {
    "id": 7,
    "name": "202007"
  }
]

我有一个 select 可用的日期列表。

import React, { useState, useEffect } from "react";
import Select from "react-select";
...

const App = () => {

    ...

    const DateA = dates.map((item) => ({
        value: item.id,
        label: item.name,
    }));

    const DateB = dates.map((item) => ({
        value: item.id,
        label: item.name,
    }));

    const [dateA, setDateA] = React.useState(null);
    const [dateB, setDateB] = React.useState(null);

    function handleChangeDateA(value) {
        setDateA(value);
    }

    function handleChangeDateB(value) {
        setDateB(value);
    }

    return (
            <div className="App">
                <div className="col-3">
                    <Select
                        classes={classes}
                        styles={selectStyles}
                        inputId="DateA"
                        TextFieldProps={{
                            label: "DateA",
                            InputLabelProps: {
                            htmlFor: "DateA",
                            shrink: true,
                            },
                            placeholder: "DateA...",
                        }}
                        options={DateA}
                        components={components}
                        value={dateA}
                        onChange={handleChangeDateA}
                    />
                </div>
                <div className="col-3">
                    <Select
                        classes={classes}
                        styles={selectStyles}
                        inputId="DateB"
                        TextFieldProps={{
                            label: "DateB",
                            InputLabelProps: {
                                htmlFor: "DateB",
                                shrink: true,
                            },
                            placeholder: "DateB...",
                        }}
                        options={DateB}
                        components={components}
                        value={dateB}
                        onChange={handleChangeDateB}
                    />
                </div>
            </div>
    );
};

export default App;

想法是 DateB select 的日期大于 select 在 DateA select 中编辑的日期。

我该怎么做，有建议吗？

Answer 1

试试这个

useEffect(() => {
        if (condition) {
         setDateB(value)
    }
          
   }, [DateA])

Select 依赖 reactjs 和 react-select

Select dependent on reactjs with react-select

javascript

select

reactjs

react-select

material-ui