Jump to content

Problem with CEF React


Whiteeee

Recommended Posts

Hi I have a problem with my react project I am making  login pane rnl and when I want to click a button my browser freezes
```
In Google chrome all works well

mp.events.add('guiReady', () => {
    loginPanel =  mp.browsers.new('package://build/index.html')
})
 
mp.keys.bind(0x12, true, () => {
    let state = !mp.gui.cursor.visible
    mp.gui.cursor.show(state, state)
})
 
      <div className="mainSection">
        <div className='topLane'> </div>
        <div className='midLane'>
          <h1>Witaj!</h1>
          <span>Zaloguj się na konto</span>
          {loginInputs()}
          <span style={{ cursor: 'pointer' }}>Nie pamiętam hasła</span>
        </div>
        <div className='botLane'>
          <button>Zaloguj się</button>
          <button onClick={() => setSection('register')}>Rejestracja</button>
        </div>
      </div>
Link to comment
Share on other sites

On 3/13/2024 at 9:06 PM, Slaurusse said:

provided too cutted code, nothing can do.

ok so it's full code of react

function App () {
  const [section, setSection] = useState('login');
  const [login, setLogfromLogging] = useState('');
  const [password, setPassword] = useState('');
  const [registerLogin, setRegisterLogin] = useState('');
  const [registerPassword, setRegisterPassword] = useState('');
  const [replayPassword, setReplayPassword] = useState('');
  const [termsState, setTermsState] = useState(false);
  const [buttonDisabledState, setButtonState] = useState(true);
 
  const doRegister = () => {
    const valuesStatements = { loginLength: registerLogin.length, passwordLength: registerPassword.length, replayPassword: replayPassword.length };
    if (registerPassword !== replayPassword) {
      alert("Passwords don't match");
      return;
    }
    if (valuesStatements.loginLength < 3 || registerPassword.length < 4 || replayPassword.length < 4) {
      alert('You have to provide at least 3 characters in Login and at least 4 characters in Password!');
      return;
    };
    //@ts-ignore
    mp.trigger("transferRegister", registerLogin, registerPassword, replayPassword);
 
  };
 
  const renderSection = (section: string) => {
    if (section === 'login') {
 
      return renderLoginSection();
    } else {
      return renderRegisterSection();
    }
  };
  const loginInputs = () => {
    return (<><input type="text" placeholder='Login' onChange={(e) => { setLogfromLogging(e.currentTarget.value); }} value={login} /><input type="password" placeholder='Hasło' onChange={(e) => { setPassword(e.currentTarget.value); }} value={password} /></>);
  };
  const closeTermsReleaseButton = () => {
    setTermsState(false);
    setButtonState(false);
  };
  const renderLoginSection = () => {
    return (
      <div className="mainSection">
        <div className='topLane'> </div>
        <div className='midLane'>
          <h1>Witaj!</h1>
          <span>Zaloguj się na konto</span>
          {loginInputs()}
          <span style={{ cursor: 'pointer' }}>Nie pamiętam hasła</span>
        </div>
        <div className='botLane'>
          <button>Zaloguj się</button>
          <button onClick={() => setSection('register')}>Rejestracja</button>
        </div>
      </div>
    );
  };
 
  return (
    <div className="App">
      <div className="header">
        {termsState ? renderTerms() : ''}
 
        <div className="characterImage">
          <img alt='Characters' src={require('./image/characters/1.png')} className="renderCharacter"></img>
        </div>
        {renderSection(section)}
      </div>
    </div>
  );
};
 
export default App;
 
//do function
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...