मैंने एक सहकर्मी से एक प्रोजेक्ट लिया जो अब हमारे लिए काम नहीं करता है। उसने मेरे द्वारा किए गए कार्यों से थोड़ा अलग काम किया है और अब मैं काफी उलझन में हूं।

मेरे पास एक मूल घटक है जहां मुझे बच्चे में किए गए परिवर्तनों को सुनना है और बाद में उनके साथ पैरेंट घटक में काम करना है

माता-पिता (मैं कंपनी के नियमों के कारण "अस्पष्ट" सहारा और क्षेत्र):

interface ParentProps {
  prop1: string;
  prop2?: string;
  prop3?: boolean;
}

function handleChange(value: String) {
  console.log(value);
}

export const Parent: FunctionComponent<ParentProps> = ({
  prop1,
  prop2,
  prop3 = isTrue(prop1),
}) => {
  return (
    <Children
      prop1Val={prop1}
      prop2Val={prop2}
      prop3Val={prop3}
      maskSettings={{
        mask: '##00 **** **** **** **** **** **** **** **',
        definitions: {
          '#': /[A-Z]/,
          '*': /[A-Z0-9]/,
        },
        prepare: (input: string) => input.toUpperCase(),
      }}
    >
    </Children>
  );
};

export default Parent;

संतान:

import { IMaskMixin } from 'react-imask';
import {
  FormControl,
  TextField,
  TextFieldProps,
  FormHelperText,
} from '@material-ui/core';

type ChildrenInputComponentProps = ChildrenProps | TextFieldProps;

const InputComponent: FunctionComponent<TextFieldProps> = (props) => (
  <TextField {...props}/>
);

const ChildrenInputComponent: FunctionComponent<ChildrenInputComponentProps> = IMaskMixin(
  InputComponent
);

interface ChildrenInputProps {
  prop1: string;
  prop2?: string;
  prop3?: boolean;
  maskSettings: MaskProps;
}

export const Children: FunctionComponent<ChildrenInputProps> = ({
  prop1,
  prop2,
  prop3 = isTrue(prop1),
  maskSettings,
}) => (
        <div>
          <ChildrenInputComponent
            {...maskSettings}
            unmask={true}
            onAccept={(unmasked: string) =>
              !!!!!!!!
              
              use the handleChange from parent
              
              !!!!!!!!
            }
            InputLabelProps={{
              shrink: true,
            }}
            fullWidth
            label={prop2}
            required={prop3}
          />
          </div>
);

export default Children;

मैं इस स्थिति में हैंडल चेंज तक कैसे पहुंचूं? पहले से ही धन्यवाद!

0
m3_ 12 अक्टूबर 2020, 11:33

1 उत्तर

सबसे बढ़िया उत्तर

आपको माता-पिता से बच्चे को प्रॉप्स के रूप में handleChange पास करना होगा -

<Children onChange={handleChange} ... />

फिर इसे बच्चे में बुलाओ -

onAccept={(unmasked: string) =>
   props.onChange(unmasked);
}

संपादित करें -

आपको अपने प्रॉप्स ऑब्जेक्ट में onChange जोड़ना होगा -

export const Children: FunctionComponent<ChildrenInputProps> = ({
  prop1,
  prop2,
  prop3 = isTrue(prop1),
  maskSettings,
  onChange, // <!--- here
}) => (

फिर इसे इस तरह बुलाओ -

onAccept={(unmasked: string) =>
  onChange(unmasked);
}
2
andy mccullough 12 अक्टूबर 2020, 11:54