Question

我正在制作一个自定义 TextInput 组件，并在其中基于状态挂钩应用了一些不同的样式，这些样式将被称为 onFocus 和 onBlur 事件，我在互联网上看到了一些解决方案，其中一些列在这里{ {3}}，我尝试了其中的一些，但没有一个适合我。

注意：我正在使用 Expo。

Screen.js

import InputField from '../Components/InputField'

const Screen = () => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    return(
         <InputField 
              placeholder='user@example.com' 
              label='E-mail' 
              value={email} 
              setValue={setEmail()} 
              isSecure={false}
              defState={false}/>
    )

}

InputField.js

const InputField = ({placeholder, label, value, setValue, isSecure, defState}) => {

    const [isFocused, setFocus] = useState(!!defState)
    const [isBlur, setBlur] = useState(!!defState)

    const handle_focus = () => {
        console.log('focused')
        setFocus(true)
        setBlur(false)
    } 

    const handle_blur = () => {
        console.log('blur')
        setBlur(true)
        setFocus(false)
    }

    return (
        <View style={isBlur ? styles.container : styles.focusContainer}>
            {isFocused ? <Text style={styles.label}>{label}</Text>: null}
            <View style={styles.inputCont}>
                <TextInput 
                    placeholder={placeholder}
                    secureTextEntry={isSecure}
                    value={value}
                    onChangeText={setValue}
                    onFocus={()=>handle_focus}
                    onBlur={()=>handle_blur}
                />
                <Icon name='checkmark-sharp' size={20} color={COLORS.blue} style={{marginLeft: 'auto'}}/>
            </View>
        </View>
    );
}

错误：

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Answer 1

在您的 InputField 中更改此

onFocus={()=>handle_focus}
onBlur={()=>handle_blur}

为此

onFocus={() => handle_focus()}
onBlur={() => handle_blur()}

而且，在您的 Screen 中更改此

setValue={setEmail()}

到这个

setValue={(text) => setEmail(text)}

太多的重新渲染。在 React Native 中

1 个答案: