Блог

У меня есть экран входа в систему, где есть поле имени и поле номера, ниже находится кнопка «Продолжить», которая должна стать розовой только тогда, когда оба поля не пусты, но теперь всякий раз, когда я ввожу само первое поле, кнопка становится розовой, я добавил проверки по мере необходимости следующим образом:

 {mobile.length <= 10 amp;amp; firstName === '' ? (
                <TouchableOpacity
                  style={{
                    backgroundColor: '#C0C0C0',
                    width: '100%',
                    height: 50,
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: 5,
                    marginTop: '20%',
                  }}
                  disabled={true}>
                  <Text
                    style={{
                      color: 'white',

                      fontSize: 18,
                    }}>
                    Continue
                  </Text>
                </TouchableOpacity>
              ) : continueresploading == true ? (
                <ActivityIndicator
                  size="large"
                  color="#FE017E"
                  style={{marginTop: '20%'}}
                />
              ) : (
                <TouchableOpacity
                  style={{
                    backgroundColor: '#FF1493',
                    width: '100%',
                    height: 50,
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: 5,
                    marginTop: '20%',
                  }}
                  onPress={() => onHandlePress()}>
                  <Text
                    style={{
                      color: 'white',

                      fontSize: 18,
                    }}>
                    Continue
                  </Text>
                </TouchableOpacity>
              )}
 

Однако это работает не так, как я ожидал, возможно, я что-то пропустил, если бы кто-нибудь мог указать мне на это, это было бы большой помощью.

Я бы сделал это так:

 const [btnClassName, setBtnClassName] = useState('first-style');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('')

const onChangeHandler = (e) =>{
    const name = e.currentTarget.name;
    const value = e.currentTarget.value;

    if(name === 'email'){
        setEmail(value);            
    }
    else if(name === 'password'){
        setPassword(value)
    }

}

useEffect(()=>{
    if (email !== '' amp;amp; password !== ''){ 
        setBtnClassName('second-style')
    }
    else {
        setBtnClassName('first-style')
    }

}, [email, password])

return (
    <input type="password" name='password' onChange = {(e) =>onChangeHandler(e)} />

    <input type="email" name='email' onChange = {(e) =>onChangeHandler(e)}/>

    <button className = {btnClassName} onClick={(e)=> onClickHandler(e)}>Click</button>
)
 

Я определяю состояние с именем btnClassName , которое изначально имеет значение ('first-style') и при каждом изменении на email и password , я проверяю, являются ли они обоими !== '' , затем я меняю состояние на ('second-style') .

Вы должны справиться с этим таким образом. Я никогда не пробовал react-native, но я уверен, что это должно работать и там.
И я не тестировал это, могут быть какие-то ошибки или даже опечатки, потому что я печатаю на своем телефоне.