如何在 React 输入框中制作可编辑的前缀值？答案

【问题标题】：How to make an editable prefixed value in a React input box?如何在 React 输入框中制作可编辑的前缀值？
【发布时间】：2020-06-19 07:06:32
【问题描述】：

关于如何制作具有预设值的可编辑输入框有什么建议吗？例如，如果这是输入框：

http://localhost:3000/

用户可以单击此框并在其顶部开始编辑

http://localhost:3000/sendAPI

或更改预设值

http://localhost:8080/sendAPI

但总的来说，当app加载时，http://localhost:3000/是初始值设置，当用户点击输入框时，value属性会变为输入框中的任何值。谢谢！

【问题讨论】：

创建一个状态变量 'inputText' 在其中设置一些初始值。。 Onchange ，您可以更新状态变量以具有最新值。
你好，我试过你的方法，它不允许我编辑输入框。猜猜为什么？
我在解决方案中提到了方法，请检查一次。这是有效的解决方案，

标签： javascript reactjs input

【解决方案1】：

只需使用包含预设值的变量并将其连接到输入的值和 onChange 事件。

import React, { useState } from 'react';

function Example() {
  const [url, setUrl] = useState("http://localhost:3000");

  return (
    <div>
      <input type="text" value={url} onChange={(e) => setUtl(e.target.value)} />
    </div>
  );
}

【讨论】：

这成功了！但是每当我尝试编辑 url 时，我的光标都会被拖到我添加的每个字符的 url 末尾。我猜这是因为状态已更新，默认要做的是将光标移动到 url 的末尾。您对如何修复光标有什么建议吗？
发生这种情况是因为状态更改导致重新渲染。如果这是一个问题，您可能想要使用与 onChange 不同的事件，也许是 onBlur...
太好了，很高兴我能帮上忙 :)

【解决方案2】：

请检查以下解决方案。初始值将设置为 "http://localhost:3000" 。一旦您开始更改，该值将不断更新。

class App extends Component {
  constructor() {
    super();
    this.state = {
      inputValue: 'http://localhost:3000'
    };
    this.handleChange = this.handleChange.bind(this);
  }

   handleChange(e){
    console.log(e.target.value);
    this.setState({inputValue: e.target.value});
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
      </div>
    );
  }
}

【讨论】：