如何在打字稿中将输入属性传递给组件内部的组件

发布于 2025-01-10 07:50:34 字数 1775 浏览 0 评论 0原文

我正在学习 React 和 TypeScript，并且正在使用样式组件构建表单。

我想将 onChange、类型和值等属性传递给我的 <Ìnput/> 组件，但我不知道如何执行此操作。

我有一个页面组件，如果我使用我的 <Ìnput /> 组件，如下所示

import { Container } from './styles';

import Header from '../../components/Header';
import Input from '../../components/Input';

const FormData: React.FC = () => {
  return (
    <Container>

      <Header>Your Data</Header>

      <fieldset>
        <legend>Personal Info</legend>
        <Input label='Nome' placeholder='Duck ' onChange={ () => {} } />
        {...others inputs here}
      </fieldset>

      <fieldset>
        <legend>Profissional Info</legend>
        <Input label='curriculum' placeholder='123.412.123-44' type={textarea}/>
      </fieldset>

    </Container>
  );
};

export default FormData;

：组件看起来像这样：

import { Label, InputField } from './styles';

interface InputProps {
  label: string;
  placeholder?: string;
}

function Input({ label, placeholder }: InputProps) {
  return (
    <Label>
      {label}
      <InputField placeholder={placeholder} />
    </Label>
  );
}

export default Input;

我尝试 ref 和forwardRef，然后将其传递给我的样式组件，但它不起作用。

在我的样式组件中，我想传递在 上使用的通用上收到的 onChange、value 和 type 属性

在我的样式组件中，我想做这样的事情：

import styled from 'styled-components';

const { type } = this.props // Can i do that?

export const InputField = styled.type`
  width: 100%;
  margin-left: 0.3rem;
`;

原文

I'm learning react and typescript and i'm building a form using styled components.

I want to pass props like onChange, type and value to my <Ìnput /> component but i dont know how to do this.

I have a <FormData /> page component were i use my <Ìnput /> component like this:

import { Container } from './styles';

import Header from '../../components/Header';
import Input from '../../components/Input';

const FormData: React.FC = () => {
  return (
    <Container>

      <Header>Your Data</Header>

      <fieldset>
        <legend>Personal Info</legend>
        <Input label='Nome' placeholder='Duck ' onChange={ () => {} } />
        {...others inputs here}
      </fieldset>

      <fieldset>
        <legend>Profissional Info</legend>
        <Input label='curriculum' placeholder='123.412.123-44' type={textarea}/>
      </fieldset>

    </Container>
  );
};

export default FormData;

and my <Ìnput /> component looks like this:

import { Label, InputField } from './styles';

interface InputProps {
  label: string;
  placeholder?: string;
}

function Input({ label, placeholder }: InputProps) {
  return (
    <Label>
      {label}
      <InputField placeholder={placeholder} />
    </Label>
  );
}

export default Input;

I tried to ref and forwardRef and then pass it on props to my styled component but it didnt work.

In my <InputField /> styled component i would like to pass onChange, value and type props received on my generic <Input /> used on <FormData />

And inside my <InputField /> styled component i would like to do something like this:

import styled from 'styled-components';

const { type } = this.props // Can i do that?

export const InputField = styled.type`
  width: 100%;
  margin-left: 0.3rem;
`;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

十雾 2025-01-17 07:50:34

对 InputField 样式组件使用 input 标记：

export const InputField = styled.input`
  width: 100%;
  margin-left: 0.3rem;
`;

只需将其用作代码中的普通输入即可：

function Input({ label, placeholder, handleChange }: InputProps) {
  return (
    <Label>
      {label}
      <InputField type="text" onChange={handleChange} placeholder={placeholder} />
    </Label>
  );
}

use an input markup for the InputField styled component :

export const InputField = styled.input`
  width: 100%;
  margin-left: 0.3rem;
`;

simply use it as a normal input in your code :

function Input({ label, placeholder, handleChange }: InputProps) {
  return (
    <Label>
      {label}
      <InputField type="text" onChange={handleChange} placeholder={placeholder} />
    </Label>
  );
}

回复收藏 0 原文

~没有更多了~