Блог

У меня есть форма, загруженная с определенными значениями в ее поле. Я не могу ввести значение полей или удалить существующие значения по умолчанию при отображении формы. По сути, я пытаюсь добавить операцию обновления в свою форму, в которой значения отображаются в поле (например, при нажатии кнопки редактирования форма отображается со значениями).).

Я попытался зафиксировать событие с помощью метода onChange, но он работает не так, как я ожидал. Значения по умолчанию извлекаются как реквизиты из родительского элемента и передаются в value аргумент формы. Я использую компоненты semantic UI React для формы.

Вот пример в CodeSandbox того, что я пытаюсь реализовать: codesandbox

В приведенном выше примере переменной передается значение в форме.

если вы посмотрите на ошибку, в ней четко написано: A component is changing an uncontrolled input of type text to be controlled . Это означает, что вы должны сохранять значения name, email in state при инициализации и изменять эти значения при onChange событии. И не обновлять значения только на onChange .

 import React, { Component } from "react";
import { Form } from "semantic-ui-react";

class FormExampleClearOnSubmit extends Component {
  state = {
    name: "james",
    email: ""
  };

  handleChange = (e, { name, value }) => this.setState({ [name]: value });

  handleSubmit = () => this.setState({ email: "", name: "" });

  render() {
    const { name, email } = this.state;

    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Group>
          <Form.Input
            placeholder="Name"
            name="name"
            value={name}
            onChange={this.handleChange}
          />
          <Form.Input
            placeholder="Email"
            name="email"
            value={email}
            onChange={this.handleChange}
          />
          <Form.Button content="Submit" />
        </Form.Group>
      </Form>
    );
  }
}

export default FormExampleClearOnSubmit;