如何根据两个输入字段向渲染按钮添加条件检查？

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，但我相信这也应该在那里工作。
而且我没有测试它，可能会有一些错误甚至拼写错误，因为我正在输入 phone.

如何根据两个输入字段向渲染按钮添加条件检查？

How to add conditional check to render button depending on two input fields?

reactjs

react-native

react-native-android

react-native-ios