реагировать. js выполнение автоматической отправки формы, когда значения = условия

Question

, поэтому у меня есть кнопки формы входа и регистрации, которые вызывают действия redux, но когда значения = условия, его вызов автоматически и 2 действия отправляются за один раз. Его мой код `

const LoginPage = p => {
    const [login, setLogin] = useState("")
    const [password, setPassword] = useState("")
    return(<div className="login-box">
 <form>
        <input className="input-login form-control" placeholder="Type your login here"onChange={(e) => setLogin(e.target.value)}/>
        <input className="input-login form-control" placeholder="Type your password here"   onChange={(e) => setPassword(e.target.value)}/>
   {login.length >= 4 && password.length >= 4 ? (<div ><button onClick={actionLogin(login,password)} className="btn  btn-primary login-btn">Login</button> 
        <button onClick={actionReg(login,password)} className="btn  btn-primary login-btn">Register</button>   </div>)
        : 
        (<div><button className="btn  btn-primary login-btn" disabled>Login</button> 
        <button className="btn  btn-primary login-btn" disabled>Register</button></div>)
        }
   </form>
    </div>)
}

`

Answer 1

Вы вызываете actionLogin и actionReg сразу после первого рендеринга компонентов, а не присоединяете к ним обработчики кликов.

Это:

onClick={actionLogin(login,password)}
onClick={actionReg(login,password)}

должно быть :

onClick={() => actionLogin(login,password)}
onClick={() => actionReg(login,password)}

Кроме того, вместо того, чтобы повторять компоненты кнопки, вы можете просто установить состояние disabled в зависимости от вашего условия:

const invalidPasswordOrLogin = login.length < 4 || password.length < 4

return (
  <div>
    <button onClick={() => actionLogin(login,password)} className="btn  btn-primary login-btn" disabled={invalidPasswordOrLogin}>Login</button> 
    <button onClick={() => actionReg(login,password)} className="btn  btn-primary login-btn" disabled={invalidPasswordOrLogin}>Register</button>
  </div>
)

Answer 2

Когда ваше условие совпадает, кнопки отображаются. Но обработчик событий onClick, прикрепленный к ним, выполняется во время самого процесса рендеринга. И за счет этого идет 2 рассылки. Вместо этого вам следует сделать так, чтобы функция вызывалась только после нажатия кнопки.

Этого можно добиться, изменив затем onClick для кнопок на что-то вроде

<div>
    <button onClick={() => actionLogin(login,password)} className="btn  btn-primary login-btn">Login</button> 
    <button onClick={() => actionReg(login,password)} className="btn  btn-primary login-btn">Register</button>
</div>

Вы правильно сделали событие onChange для входов. Тогда, я надеюсь, вы понимаете, почему этот тип синтаксиса необходим и для кнопок, и для тех мест, где вы передаете функции.

Answer 3

Проблема в вашем коде заключается в том, что когда вы генерируете кнопку таким образом:

<button onClick={actionLogin(login,password)} ...

, вы выполняете функцию. Попробуйте так:

<button onClick={() => actionLogin(login,password)} ...

То же самое с функцией actionReg