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

我有一个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"
            />
...

导出类FormUserDetails扩展组件{
继续=e=>{
e、 预防默认值（）；
this.props.nextStep（）；
};
render（）{
const{values，handleChange}=this.props；
返回(
...
您需要为组件的道具提供一个接口。对于
FormUserDetails
，您需要定义一个包含
值和
handleChange
的接口或类型别名

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

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

}

接口FormUserDetailsProps{
价值观：{
name:string；//包括其他必需的属性
};
handleChange:（值：string）=>void；
}
导出类FormUserDetails扩展组件{
//其余的在这里做
}
您需要为组件的道具提供一个接口。对于
FormUserDetails
的情况，您需要定义一个包含
值和
handleChange
的接口或类型别名

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

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

}

接口FormUserDetailsProps{
价值观：{
name:string；//包括其他必需的属性
};
handleChange:（值：string）=>void；
}
导出类FormUserDetails扩展组件{
//其余的在这里做
}
您好，您可以通过这种方式为类组件创建类型

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

接口IProps{
下一步：（）=>void；
价值观：{
名字：string
};
handleChange:（值：字符串）=>void
}
导出类FormUserDetails扩展组件{
继续=e=>{
e、 预防默认值（）；
this.props.nextStep（）；
};
render（）{
const{values，handleChange}=this.props；
返回(
...
...
您好，您可以通过这种方式为类组件创建类型

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

接口IProps{
下一步：（）=>void；
价值观：{
名字：string
};
handleChange:（值：字符串）=>void
}
导出类FormUserDetails扩展组件{
继续=e=>{
e、 预防默认值（）；
this.props.nextStep（）；
};
render（）{
const{values，handleChange}=this.props；
返回(
...
...
但您也可以使用function component，因为它更干净、更好、更可读，特别是在使用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"
        />
)}



接口IProps{
下一步：（）=>void；
handleChange:（值：字符串）=>void
价值观：{
名字：string
};
}
const FormUserDetails=（props:IProps）=>{
const{values，handleChange，nextStep}=props；
const continue=（e:any）=>{
e、 预防默认值（）；
下一步（）；
};
返回(
)}
但您也可以使用function component，因为它更干净、更好、更可读，特别是在使用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"
        />
)}



接口IProps{
下一步：（）=>void；
handleChange:（值：字符串）=>void
价值观：{
名字：string
};
}
const FormUserDetails=（props:IProps）=>{
const{values，handleChange，nextStep}=props；
const continue=（e:any）=>{
e、 预防默认值（）；
下一步（）；
};
返回(
)}
你能粘贴完整的文件吗？@vjr12我上传了我想实现的tsx文件，如我的问题和有我的道具的主JS文件。你能粘贴完整的文件吗？@vjr12我上传了我想实现的tsx文件，如我的问题和有我道具的主JS文件