创建以特定前缀开头且不可擦除的输入文本

Question

我想创建一个简单的输入文本，以某个选定的前缀开头，并在该前缀之后立即开始写入，当用户删除输入文本时，它不会删除它保留在那里的前缀，是否有解决方案可以实现这一点？

                       <div className="position-relative form-group">
                            <img src="./redRisk.png" style={{ width: '2%' }} 
                               />
                               <input
                                name="titre"
                                id="exampleEmail"
                                type="text"
                                className="form-control"
                                 onChange={()=>{}}
                               />
                        </div>

Answer 1

这是可行的，但我认为旁边带有样式文本的选项更好

const prefix = 'prefix-'

 <div className="position-relative form-group">
      <input
          name="titre"
          id="exampleEmail"
          type="text"
          className="form-control"
          ref={(target)=>{
            target.value = prefix
          }}
          onChange={(e)=>{
            const input = e.target.value
            e.target.value = prefix + input.substr(prefix.length)
          }}
      />
</div>