Adding an editable prefix to the input - react

Question

I want to add an editable prefix to the phone number input. My code looks like this

                <input
                    changeHandler={this.onInputChange}
                    errors={errors}
                    onBlur={this.onInputBlur}
                    onFocus={this.onInputFocus}
                    resetErrors={clearFieldErrors}
                    value={`+41${phoneNumber}`}/>

however, after adding the prefix I can't write anything in input. Does anyone know why this is happening and how to fix it?

Answer 1

Instead of changeHandler, you should be using onChange. See examples in https://reactjs.org/docs/forms.html#controlled-components .

Also you might use it as uncontrolled-component and give defaultValue={'+41'} too.

Answer 2

Instead of passing hard coded "+41" in value prop, just initialize the phoneNumber useState

Try the following code, you may find want you looking for.

export default function App() {
  const [inputPhoneNumber, setInputPhoneNumber] = React.useState('');
  const [phone, setPhone] = React.useState('+41');

  const inputChangeHandler = ({ target }) => {
    setPhone(target.value);
  };

  const submitHandler = (e) => {
    e.preventDefault();
    setInputPhoneNumber(phone);
    setPhone('+41');
  };

  return (
    <>
      <form onSubmit={submitHandler}>
        <input onChange={inputChangeHandler} value={phone} />
        <button type="submit">Submit</button>
      </form>
      <h1>{inputPhoneNumber}</h1>
    </>
  );
}

Answer 3

It is probably changeHandler, can you give out more code?