时间戳

首页 > 解决方案 > 如何将道具传递给 onBlur() 并同时使用预定义的函数（React Native）？

javascript - 如何将道具传递给 onBlur() 并同时使用预定义的函数（React Native）？

问题描述

我有一个文本输入组件，它使用 onBlur 和 onFocus 事件更改其背景颜色。我想要做的是使用道具将另一个函数传递给 onBlur，因此组件将执行这两个操作。

这是我的组件：

const Input: React.FC<TextInputProps> = (props) => {
    const [color, setColor] = useState("#f2f2f2");

    return (
        <TextInput
            onFocus={() => setColor('#f9ffc4')}
            onBlur={() => setColor('#f2f2f2')} // I would like to use props.onBlur here in addition to setColor()
            onChangeText={props.onChangeText}
            style={{ backgroundColor: color }}
            value={props.value}
        >
        </TextInput>
    )
}

export default Input;

这就是我使用它的方式：

return (
    <Input
        onChangeText={ handleChange('cpf') }
        value={values.cpf}
        onBlur={() => setFieldTouched('cpf')} //I want to call it along with the method declared in the component
    />
    {touched.cpf && errors.cpf &&
        <Text style={{ color: 'red', width: '100%', textAlign: 'right' }}>{errors.cpf} </Text>
    }
)

我知道我可以在这里使用 setColor()，但是我还有很多其他输入，如果我这样做了，我将不得不为它们中的每一个创建一个 useState const，这不是我想要的。

如果有人可以在这里帮助我，我将不胜感激，如果我的问题不清楚，请问我，我会尽力解释得更好。

标签： javascriptreactjsreact-native

解决方案

onBlur={() => {
  setColor('#f2f2f2');
  props.onBlur();
}}

这是你想要的吗？

推荐阅读