空值未在语义反应输入字段中更新

Question

我正在使用 React Semantic 创建表单 UI。这是表格。

<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}
            />
            <br />
            <Form.Button content="Submit" />
          </Form.Group>
        </Form>

这里是提交操作方法

handleSubmit = () => {
    const { name, email } = this.state;
    this.setState({
      submittedName: name,
      submittedEmail: email,
      name: null,
      email: null
    });
  };

将输入字段 values 保存到 submitted values 后，我正在尝试将 name 和 email 更新为空。该值正在更新为 null，但输入框仍仅显示键入的值。

如果我将值更新为 ""（如下所示），则更新正常。

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

但它不能单独用于 null 值。这里有任何线索。示例代码和框：https://codesandbox.io/s/nullvalueissue-h3sv9?file=/example.js:289-476

Answer 1

文档中的示例都使用 "" 重置，但如果出于某种原因您需要使用 null 则只需有条件地设置值：value={email ? email : ""}

已编辑沙盒：https://codesandbox.io/s/nullvalueissue-forked-hllno

Answer 2

我不擅长 class 组件，但我会 value={form.email || ""} 和

    setForm({ ...form, [name]: value });
  };

空值未在语义反应输入字段中更新

null value not updating in Semantic react Input field

reactjs

semantic-ui-react