如何在React中更改对象属性？

如何解决如何在React中更改对象属性？

我想每次用户通过在UI中提交的下拉表单上单击货币更改货币值时，都更改数字组件上的₪符号。现在，我在DropDown组件上使用了一个名为ValueType的对象，并在其出现在UI上时将其导出到Number字段组件。我如何才能正确地基于“货币”（DropDown组件上的“ Value”属性）的下拉选择，ValueType中的will将会更改，并且将出现在UI中。

以下是有关表单在UI上的外观的图像：

DropDown组件

`
import React,{ useEffect,useState,useMemo,useRef } from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import { Form } from 'react-bootstrap';

const BackToFrontConverter: any = {
    'ILS': 'ש״ח','USD': "דולר",'EUR': "אירו",'GBP': "ליש״ט",}
enum Currency {
    ILS,USD,EUR,GBP
}


export const ValueType: any = {
    'shekel': '₪','percentage': '%'
}

export default function (props: any) {
    const { validation,onChange,label,value,id,options,placeholder } = props;

    const [selected,setSelected] = useState<any>([]);
    const dropdownRef = useRef<any>();

    const adaptOuterOptionsToComponent = useMemo(() => {
        return options && options.map((el: { selected: boolean,text: string,id?: string },index: number) => ({
            id: el.id || index,label: el.text,})) || [];
    },[]);

    const getOptions = () => {
        console.log(options);
        return options;
    }
    
  if(id === 'currency'){
    useEffect(() => {
        const index = adaptOuterOptionsToComponent.findIndex((el: any) => {
            return id === 'currency' && el.label === BackToFrontConverter[value] ? BackToFrontConverter[value] : adaptOuterOptionsToComponent[value];
        }
        );
        setSelected([adaptOuterOptionsToComponent[value]]);
        if (dropdownRef && dropdownRef.current && value !== undefined) {
            dropdownRef.current.setState({ text: id === 'currency' ? BackToFrontConverter[value] : adaptOuterOptionsToComponent[value].label });
        }
    },[value]);
}




useEffect(() => {
  const changeValCurForm = () =>  {if(value === Currency.ILS){
       return ValueType['shekel'] = '₪'
    }else if(value === Currency.USD){
       return ValueType['shekel'] = '@'
    }
}

  },[]);

  console.log(ValueType);


   
    const adaptCbFunction = (selected: Array<Object | string | any>) => {
        return selected && selected[0] && onChange({
            target: {
                id,value: id === 'currency' ? Currency[selected[0].id].toString() : selected[0].id,}
        })
    };


    return (
        <>
            <Form.Label column>{typeof label === 'object' ? label.value : label}</Form.Label>
            <Typeahead
                ref={dropdownRef}
                labelKey={(obj) => obj.label}
                id={id}
                onChange={adaptCbFunction}
                options={adaptOuterOptionsToComponent}
                placeholder={placeholder}
            >
            </Typeahead>
            <Form.Control.Feedback type="invalid">
                {validation && validation.error}
            </Form.Control.Feedback>
        </>
    )
}

这是我试图做到的：

`
useEffect(() => {
  const changeValCurForm = () =>  {if(value === Currency.ILS){
       return ValueType['shekel'] = '₪'
    }else if(value === Currency.USD){
       return ValueType['shekel'] = '@'
    }
}

  },[]);
`

Numebr组件（出现₪符号的地方）

 `
import React,{ useRef,useEffect } from 'react';
import Cleave from "cleave.js/react";
import { Form,Tooltip,OverlayTrigger,Button,InputGroup } from 'react-bootstrap';
import { ValueType } from '../dropdown/dropdown';

export default function (props: any) {
  const { validation,placeholder } = props;
  const [tooltip,setTooltip] = useState<any>(false);

  useEffect(() => {
      setTooltip(label && typeof label === 'object');
  },[props]);

  return (
    <>
     <Form.Label column>
                {props.required && <span className="text-negative">*</span>}
                {label && label.value}
                {tooltip && label?.help?.value && <OverlayTrigger
                    delay={{ show: 250,hide: 400 }}
                    overlay={(props:any) => (<Tooltip id="overlay-" {...props}>{label?.help?.value}</Tooltip>)}
                >
                    <span className="px-1" ><i style={{ fontSize: '.8rem' }} className="fa fa-question-circle-o" /> </span>
                </OverlayTrigger>}
            </Form.Label>
            

      <Cleave
        placeholder={placeholder}
        onChange={onChange}
        options={{
          numeral: true,numeralDecimalScale: 4,}}
         id={id}
         value={value}
        className="form-control"
      />
         {
                props.valueType &&
                <>
                    <InputGroup className="d-flex flex-row-reverse">
                        <InputGroup.Prepend>
                            <InputGroup.Text className="prepand-border-radius">{ValueType[props.valueType]}</InputGroup.Text>
                        </InputGroup.Prepend>
                        <Form.Control.Feedback type="invalid">
                            {props.validation && props.validation.error}
                        </Form.Control.Feedback>

                    </InputGroup>
                </>
            }

            {
                !props.valueType &&
                <>
                    <Form.Control.Feedback type="invalid">
                        {props.validation && props.validation.error}
                    </Form.Control.Feedback>
                </>
            }
    </>
  );
}
`


`