Как сделать редактируемое префиксное значение в поле ввода React?

Question

Есть предложения о том, как сделать редактируемое поле ввода с заранее установленным значением? Например, если это поле ввода:

http://localhost:3000/

, пользователь может щелкнуть это поле и начать редактирование поверх него

http://localhost:3000/sendAPI

или изменить предустановленное значение

http://localhost:8080/sendAPI

Но в целом, когда приложение загружается, http://localhost:3000/ - это начальное значение, установленное, и когда пользователь нажимает на поле ввода, атрибут значения изменится на то, что находится в поле ввода. Спасибо!

Answer 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>
  );
}

Answer 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>
    );
  }
}