SolidJS•7d ago

Handling <input>

Is this a correct way to handle <input> fields? <input onInput={e => setUserName(e.target.value)} value={userName()} /> Or should I use a ref instead and read the field value when it is needed? Is there a concept of "controlled input" in solidjs? Or only "uncontrolled input"? Thanks.

4 Replies

Madaxen86•7d ago

Yes it is the correct way for a controlled input. And you can alternatively use uncontrolled inputs. Both concepts exist.

juanrgm•7d ago

Really this is not controlled input, it's pseudo controlled input If you drop the onInput attribute, the value is not frozen

Madaxen86•7d ago

Well not a controlled by React’s definition. Because in Solid all elements are real HTML elements they will fallback to their native behavior. For an input value is then just the defaultValue in Reacts sense. But you can control what's displayed on the input e.g. make all characters lowercase. That's controlled for me...

 const [email, setEmail] = createSignal("");
 const val = () => email().toLowerCase();

  return (
    <>
      <label>Email</label>
      <input 
      onInput={e => setEmail(e.target.value)} 
      value={val()} />
    </>
  );

 const [email, setEmail] = createSignal("");
 const val = () => email().toLowerCase();

  return (
    <>
      <label>Email</label>
      <input 
      onInput={e => setEmail(e.target.value)} 
      value={val()} />
    </>
  );

snorbiOP•5d ago

Thanks!

Gaming

Programming

Handling <input>