react hook版本子传父

最新推荐文章于 2024-11-15 01:16:37 发布

原创最新推荐文章于 2024-11-15 01:16:37 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文介绍了如何在React中使用useState Hook实现一个搜索输入框，当用户输入数据后显示清除按钮，点击清除按钮即可清空输入框并传递空字符串给父组件。

//定义一个数据


const [value, setValue] = useState<string>('')


//子组件在父组件

  <SearchInputField
                name='name'
                label='货物信息'
                icon={iconName}
                placeholder='输入姓名/手机号'
                value={value}
                maxlength={50}
                onChange={handleChange}
                onClearValue={(v) => setValue(v)}
                searchRequired
            />



//子组件
interface SearchInputFieldProps{
    onClearValue: (v: string) => void
}

export const SearchInputField = ({
    onClearValue,
}: SearchInputFieldProps) => {
    const clearInputValue = () => {
        onClearValue('')
    }
    return (
        <Wrapper showBottomBorder={showBottomBorder}>
            {!!value && (
                <IconBox
                    onClick={(e) => {
                        e.stopPropagation()
                        clearInputValue()
                    }}
                >
                    <Icon
                        color={Colors.BorderGray}
                        size={18}
                        name='Close_round_fill-01'
                    />
                </IconBox>
            )}
        </Wrapper>
    )
}

这个方法主要实现的效果是输入框输入数据后，清除按钮显现，点击清除按钮清空输入框。子组件点击传递一个空字符串回去，父组件接收