问如何使用语义用户界面和钩子来获取下拉列表的值

EN

import { Formik } from "formik";
import React, { Fragment } from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setModalStates } from "redux/actions/appActions";
import { IStore } from "redux/interfaces/types";
import { Button, Dropdown, Form, Grid, Icon } from "semantic-ui-react";

const QueryBuilder = () => {

    const [rulesetList, setrulesetList] = useState([{ entity: "", condition: "", val: "" }]);
    const mainField = [
        {
            key: "fruit",
            text: "fruit",
            value: "fruit"
        },
        {
            key: "color",
            text: "color",
            value: "color"
        },
        {
            key: "taste",
            text: "taste",
            value: "taste"
        }
    ]

    const operation = [
        {
            key: "is ",
            text: "is ",
            value: "is "
        },
        {
            key: "is not ",
            text: "is not ",
            value: "is not "
        }
    ]
    const options = [
        {
            key: "apple",
            text: "apple",
            value: "apple"
        },
        {
            key: "yellow",
            text: "yellow",
            value: "yellow"
        },
        {
            key: "sweet",
            text: "sweet",
            value: "sweet"
        },
    ]

    const [dropDownOptions, setDropDownOptions] = useState(options);
    const [currentValue, setCurrentValue] = useState("");
    const handleAddition = (e: any, { value }: any) => {
        setDropDownOptions((prevOptions) => [
            ...prevOptions,
            { key: value, text: value, value },
        ]);
    };

    const handleChange = (e: any, { value }: any) => {
        setCurrentValue(value);
    }

    const handleRemoveClick = (index: number) => {
        const list = [...rulesetList];
        list.splice(index, 1);
        setrulesetList(list);

    };

    const handleAddClick = () => {
        setrulesetList([...rulesetList, { entity: "", condition: "", val: "" }]);
        setDropDownOptions(options)
    };

    const initialValues = {
        mainField : "",
        operation: "",
        resultant_value: ""
    }

    return (
        <Fragment>
            {rulesetList.map((x, i) => {
                return (
                    <Grid >
                        <Grid.Row className={"rulesetGrid fluid"} >
                            <Formik
                                initialValues={initialValues}
                                onSubmit={values => {
                                    console.log("here",values)
                                }}

                            >
                                {
                                    ({ handleSubmit, values, setValues }) => (
                                        <Form onSubmit={handleSubmit} className={"rulesetForm"}>
                                            {i == 0 ? <p className="condition"> If</p> : <p className="condition"> And</p>}

                                            <Dropdown
                                                name="mainField"
                                                className={"dropdown fieldDropdown"}
                                                widths={2}
                                                placeholder='Fruit'
                                                fluid
                                                selection
                                                options={mainField}
                                            />

                                            <Dropdown
                                                name="operation"
                                                className={"dropdown operationDropdown"}
                                                widths={2}
                                                placeholder='Operation'
                                                fluid
                                                selection
                                                options={operation}
                                            />
                                            <Dropdown
                                                name="resultant_value"
                                                className={"dropdown valueDropdown"}
                                                widths={1}
                                                placeholder='Value'
                                                fluid
                                                search
                                                allowAdditions
                                                selection
                                                multiple
                                                options={dropDownOptions}
                                                value={currentValue }
                                                onAddItem={handleAddition}
                                                onChange={handleChange}
                                            />

                                            {rulesetList.length - 1 === i && <Icon className={"Plus plusIcon"} onClick={handleAddClick} />}
                                            {rulesetList.length !== 1 && <Icon className={"LineThicknessMedium signal-danger crossIcon"} onClick={() => handleRemoveClick(i)} />}
                                        </Form>
                                    )
                                }
                            </Formik>
                        </Grid.Row>

                    </Grid>
                );
            }
            )}
            <div>
                <div style={{ marginTop: "1rem" }}>
                    <Button
                        floated="right"
                        type="submit"
                        variant="contained"
                        primary={true}
                    >
                        Submit
                    </Button>
                </div>
            </div>
        </Fragment>
    );

}
export default QueryBuilder