如何在 React TypeScript 中实现 e 和 props？

Question

我有一个 JS 组件，我在其中定义了一些正常的 jsx 函数和状态，现在我想将它们用作道具在 tsx 文件中，但由于我是初学者，所以我很困惑。这是我想在 tsx:

中实现的 js 版本

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

Answer 1

您需要为组件的道具提供接口。对于 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

}

Answer 2

您好，您可以通过这种方式为 class 组件创建类型

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"
            />
...

Answer 3

但你也可以使用函数组件，因为它更干净、更好、更易读，特别是在使用 typescript 时：

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"
        />
)}

如何在 React TypeScript 中实现 e 和 props？

How to implement e and props in React TypeScript?

javascript

typescript

reactjs

tsx