使用 Semantic UI React 加载值时无法编辑表单答案

【问题标题】：Unable to edit form when loaded with values using Semantic UI React使用 Semantic UI React 加载值时无法编辑表单
【发布时间】：2020-10-06 09:31:03
【问题描述】：

我有一个在其字段中加载了某些值的表单。呈现表单时，我无法输入字段的值或删除现有的默认值。基本上，我试图在我的表单中添加一个更新操作，其中值显示在字段中（例如，单击编辑按钮时，表单会显示值）。

我尝试使用 onChange 方法捕获事件，但它没有按预期工作。默认值作为 props 从其父级获取并传递给表单的 value 参数。我正在为表单使用语义 UI React 组件。

这是我正在尝试实现的代码和框中的示例： codesandbox

在上面的例子中，变量被传递给表单中的值。

【问题讨论】：

标签： javascript reactjs semantic-ui-react

【解决方案1】：

如果您查看错误，它会清楚地显示：A component is changing an uncontrolled input of type text to be controlled。这意味着您必须在初始化时将name, email 的值存储在状态中，并在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;

【讨论】：