Как реализовать е и реквизит в React TypeScript? - PullRequest
Новая
       20

Как реализовать е и реквизит в React TypeScript?

1 голос
/ 15 апреля 2020

У меня есть JS Компонент, в котором я определил некоторые нормальные jsx функции и состояния, и теперь я хочу использовать их в качестве реквизита в файле TSX, но так как я Я новичок, я запутался. это js версия того, что я хочу реализовать в tsx : 

export class FormUserDetails extends Component {
  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values, handleChange } = this.props;
    return (
    ...
            <AppBar title="Enter User Details" />
            <TextField
              placeholder="Enter Your First Name"
              label="First Name"
              onChange={handleChange('firstName')}
              defaultValue={values.firstName}
              margin="normal"
                            fullWidth="true"
            />
...

Как реализовать это в React TypeScript с помощью: 

export class MainInfo extends Component<Props,{}>

или аналогично?

Песочница: в ней есть мой tsx-файл, который я хочу реализовать, как в моем примере, и файл JS, определяющий мои реквизиты https://codesandbox.io/s/tsx-rj694

Ответы [ 3 ]

1 голос
/ 15 апреля 2020

привет, вы можете создавать типы для компонента класса таким образом 

interface IProps {
 nextStep: () => void;
 values: {
    firstName: string
 };
 handleChange: (value: string) => void
}

export class FormUserDetails extends Component<IProps> {
  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values, handleChange } = this.props;
    return (
    ...
            <AppBar title="Enter User Details" />
            <TextField
              placeholder="Enter Your First Name"
              label="First Name"
              onChange={handleChange('firstName')}
              defaultValue={values.firstName}
              margin="normal"
                            fullWidth="true"
            />
...
1 голос
/ 15 апреля 2020

, но вы также можете использовать компонент функции, потому что он намного чище, приятнее и удобочитаемее, особенно при использовании машинописи: 

interface IProps {
 nextStep: () => void;
 handleChange: (value: string) => void
 values: {
    firstName: string
 };
}

const FormUserDetails = (props: IProps) => {
  const { values, handleChange, nextStep } = props;
  const continue = (e: any) => {
    e.preventDefault();
    nextStep();
  };

    return (
        <AppBar title="Enter User Details" />
        <TextField
            placeholder="Enter Your First Name"
            label="First Name"
            onChange={handleChange('firstName')}
            defaultValue={values.firstName}
            margin="normal"
            fullWidth="true"
        />
)}
1 голос
/ 15 апреля 2020

Вам потребуется предоставить интерфейс для реквизита вашего компонента. Для случая FormUserDetails вам потребуется определить псевдоним интерфейса или типа, который содержит values и handleChange. 

interface FormUserDetailsProps {
  values: {
    name: string; // include other required properties
  };
  handleChange: (value: string) => void;
}

export class FormUserDetails extends Component<FormUserDetailsProps> {
  // do the rest here

}
...