Блог

 import React from 'react';
import useState from './App';
import username from './App';
import setUsername from './App';
import setAppState from './App';

function LoginPage(props) {

 const onClick = () => {
    props.onLogin(setUsername);

  }

  return (
    <div className="chat-login-page-container">
     <div className="chat-login-page-controls-container">
       <h4>Set your username</h4>
        <input type="text" 
               placeholder="Username"
               value={props.username} 
               username={username}
               setUsername={username}
           
               onChange={props.onChange} />
           
        <button type="button" disabled={username.length === 0} onClick='onClick'>Log 
 in</button>
      </div>
    </div>
  );
}

export default LoginPage;
 

Я продолжаю пытаться исправить код с помощью разных переменных и пытаюсь сделать его не значением, но это просто не работает. Я в растерянности и не знаю, что делать.

1. Во-первых, вы должны использовать деструкцию объектов для реквизитов

   const {имя пользователя, onChange, onLogin} = реквизиты;

2. В компоненте «кнопка» свойство "onClick" ожидает функцию. В вашем коде onClick='onClick' свойство получает строку , а не функцию. Я не уверен, что должна делать функция onClick, но она должна выглядеть примерно так:

 <button type="button" disabled={username.length === 0} onClick={()=>{onLogin(setUsername}}>Log in</button>