反应打字脚本故事书使用onChange回调实现定制的输入组件，然后将setState值返回到输入 [英] React Typescript storybook implement customized Input component with onChange callBack then setState value backTo Input

问题描述

我目前正在实现一个带有故事书的Reaction定制输入组件。 我希望实现的是这个自定义的输入组件将使用几个参数，其中一个参数是onChangeInput，它将负责稍后为‘InputValue’设置State值，以下是我的主要输入组件实现：

Input.tsx

import React from 'react'

export type Props = {
  /**
   * This is the Label text value
   */
  labelText?: string,
  /**
   * Placeholder text for input
   */
  placeholder?: string,
  /**
   * Classes defined here will be appended to the input's default classes
   */
  className?: string,
  /**
   * Value attribute of Input
   */
  value?: string,
  /**
   * Name attribute of Input
   */
  name?: string,
  /**
   * Label for attribute
   */
  htmlFor?: string,
  /**
   * Callback for when user typing in Input
   */
  onChangeInput: any,
}

/**
 * Generic input component.
 */
export function Input({labelText, placeholder='', className='', value='', name='', htmlFor='', onChangeInput}:Props) {    
    return (
        <div>
            <label className='text-text-01-normal font-medium text-sm leading-5' htmlFor={htmlFor}>
                {labelText}
            </label>
            <div className="relative">
                <input
                    id={htmlFor}
                    className={[
                        "relative w-64 pl-3 h-8 py-2 border rounded bg-ui-03 border-ui-06 text-text-01-normal leading-5 text-sm text-left hover:bg-ui-03 hover:border-ui-07 focus:bg-ui-03 focus:outline-none focus:border-interactive-01-active active:bg-ui-03",                        
                        className
                        ].join(' ')} 
                    placeholder={placeholder}
                    value={value}
                    name={name}
                    onChange={ (e) => { onChangeInput(e.target.value) }}
                />
            </div>
        </div>
    )
}   

然后在我的故事书文件中，我希望有一个钩子useState用于localValue，当onChangeInput作为方法传递到定制输入组件中时，本机onChange From Input将开始让它为LocalValue设置State，这样我的定制输入组件就可以在用户键入时显示输入值...

Input.stories.tsx

import React, { useState } from 'react';
import { Story, Meta } from '@storybook/react';
import { withDesign } from 'storybook-addon-designs'

import { Input, Props } from './Input';

const [localValue, setValue] = useState<string>('');
const onChangeInput = (inputValue: string) => {
    console.log(inputValue);
    setValue(inputValue);
}

export default {
  title: 'General/Input',
  component: Input,
  decorators: [withDesign],
  parameters: {
    design: {
      type: 'figma',
    },
  },
} as Meta;

const Template: Story<Props> = (args:Props) => <Input {...args} />;

export const Default: Story<Props> = Template.bind({});
Default.args = {
  labelText: 'Label',
  placeholder: 'Placeholder',
  name: 'test-name',  
  htmlFor: 'test-for',
  value: localValue,
  onChange: onChangeInput,
} as Partial<Props>;
Default.parameters = {
  design: {
    url: 'https://www.figma.com/to-some-design-url'
  }
}

但不幸的是我不能让它工作，所以在这里寻求帮助，请用代码示例建议，谢谢

推荐答案

我自己调查了一下。Input.tsx文件没有问题。 只是对故事书有一些误解。 以下是解决方案，运行良好，如果任何人在未来搜索相同的问题，请随时复制粘贴到您自己的项目：) 谢谢

import React, { useState } from 'react';
import { Story, Meta } from '@storybook/react';
import { withDesign } from 'storybook-addon-designs'

import { Input, Props } from './Input';

export default {
  title: 'General/Input',
  component: Input,
  decorators: [withDesign],
  parameters: {
    design: {
      type: 'figma',
    },
  },
} as Meta;

const Template: Story<Props> = () => {    
    const [localValue, setValue] = useState<string>('');
    const onChangeInput = (inputValue: string) => {
        setValue(inputValue);
    }
    return (
        <Input 
            labelText='Label'
            placeholder='Placeholder'
            className='test-class-name'
            name='test-name'            
            value={localValue}
            htmlFor='test-for'
            onChangeInput={ onChangeInput }
        />
    )
}

export const Default: Story<Props> = Template.bind({});
Default.parameters = {
  design: {
    url: 'https://www.figma.com/link-to-design'
  }
}

这篇关于反应打字脚本故事书使用onChange回调实现定制的输入组件，然后将setState值返回到输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！