如何添加条件检查渲染按钮取决于两个输入字段?

Question

我有一个登录屏幕，下面有名称字段和数字字段是一个按钮'Continue'，只有当两个字段都不是空的时候才应该变成粉红色，但现在每当我在第一个字段本身输入按钮变成粉红色时，我已经根据需要添加了检查如下:

{mobile.length <= 10 && 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>
              )}

然而，这并没有按照我的期望工作，也许我错过了什么，如果有人能指出来给我这将是一个很大的帮助。

Answer 1

我会这样做:

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 !== '' && 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，但我相信这也应该行得通。
我没有测试过，可能会有一些错误甚至错字，因为我是在手机上打字。