react hook版本子传父

最新推荐文章于 2023-06-21 11:42:02 发布

StriplingLee

最新推荐文章于 2023-06-21 11:42:02 发布

阅读量507

点赞数 1

文章标签： react

本文链接：https://blog.csdn.net/striplinglee/article/details/124942571

版权

//定义一个数据


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

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