Select 依赖于 reactjs 与 react-select

Question

I'm developing an App in ReactJS, and I have a page where I want to show two select, one dependent on the other.

I'm using react-select and @material-ui .

In 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"
  }
]

I have a list of dates that are available to 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;

The idea is that the DateB select take dates greater than the ones selected in the DateA select.

How can I do this, suggestions?

Answer 1

Try this

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