Блог

Я новичок в работе с React, так что это может быть легко, что я изо всех сил пытаюсь понять. Допустим, у меня есть этот очень простой класс, который отображает входные данные со значением по умолчанию. Я хочу, чтобы этот ввод имел значение, которое я установил, но также мог его изменить. Однако, когда он отображается, поле ввода заполняется «привет», и я не могу ничего написать или удалить поверх него. Как я могу сделать это возможным?

 export class Hello extends React.Component {
render(){
    let i = "hi"
    return(
        <div>
            <input type="input" value={i} />
        </div>
    );
}
 

}

Сохраните входное значение как часть состояния вашего компонента и прослушайте событие onchange в поле ввода, чтобы обновить состояние компонента.

 export class Hello extends React.Component {
  state = {
    textbox: "hi",
  };
  render() {
    return(
        <div>
            <input
              type="input"
              value={this.state.textbox}
              onChange={ev => this.setState({ textbox: ev.target.value })}
            />
        </div>
    );
  }
}
 

См. Примеры: https://reactjs.org/docs/forms.html#controlled-components

Для этих целей вам необходимо использовать состояние. Посмотрите сюда: https://reactjs.org/docs/forms.html#controlled-components

Я добавляю немного другой ответ, это зависит от того, является ли ваш компонент контролируемым или неконтролируемым компонентом, см. Разницу в документах.

Контролируемый пример вы можете найти в других ответах или документах.

Неконтролируемый пример обычно используется при использовании <form/> элементов, в этом случае вы можете просто добавить defaulValue реквизит, как указано в соответствующих документах.

 class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: '   this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" defaultValue="hi" ref={this.input} />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}