向输入添加可编辑前缀 - 反应

Question

我想在电话号码输入中添加一个可编辑的前缀。 我的代码看起来像这样

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

但是，添加前缀后，我无法在输入中写入任何内容。 有谁知道为什么会发生这种情况以及如何解决？

Answer 1

您应该使用 onChange，而不是 changeHandler。 请参阅https://reactjs.org/docs/forms.html#controlled-components中的示例。

您也可以将其用作不受控制的组件并给出 defaultValue={'+41'} 。

Answer 2

而不是在 value prop 中传递硬编码的“+41”，只需初始化phoneNumber useState

试试下面的代码，你可能会找到你想要的。

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

可能是changeHandler，你能给出更多的代码吗？