Question

我正在使用语义UI反应创建下面的表单（内部模式）。

  <Modal open={editBasicModal} size="small">
    <Modal.Header>Your basic details</Modal.Header>
    <Modal.Content scrolling>
      <Form loading={isSubmitting}>
        <Form.Group inline widths="equal">
          <Form.Input
            required
            label="First Name"
            fluid
            type="text"
            name="firstName"
            value={values.firstName}
            onChange={handleChange}
            error={errors.firstName !== undefined}
          />
          <Form.Input
            required
            label="Last Name"
            fluid
            type="text"
            name="lastName"
            value={values.lastName}
            onChange={handleChange}
            error={errors.lastName !== undefined}
          />
        </Form.Group>
        <Form.TextArea
          label="Bio"
          type="text"
          name="bio"
          value={values.bio}
          onChange={handleChange}
          rows={3}
          error={errors.bio !== undefined}
        />
        <Form.Select
            label="Country"
            name="location.country"
            placeholder="Country"
            value={values.location.country}
            onChange={(e, { value }) => {
              setFieldValue("location.country", value);
            }}
            options={this.state.allCountries}
          />
      </Form>
    </Modal.Content>
    <Modal.Actions open={true}>
      <Button type="submit" onClick={handleSubmit} >
        Update
      </Button>
    </Modal.Actions>
  </Modal>

上面的代码来自使用Formik + yup的组件。
this.state.allCountries是200多个记录的数组。现在，这使我的表单变慢，textarea和input中的键入非常慢。

根据我的发现，Form.Select中的大型数据集导致了此问题，因为如果我将options={this.state.allCountries}替换为options={[ { key: 1, value: "india", text: "india"} ]}，一切都会开始正常进行。或者，如果我删除Form.Select，那么该表格也可以正常工作。

几个问题？

这是一个已知问题吗？
可能的解决方案是什么？

Answer 1

我发现Form.Select存在问题。我用select进行了更改，然后一切正常。这是select的更新代码：

<Form.Field > 
  <label htmlFor="location.country">Country</label>
  <select 
    name="location.country" 
    id="location.country" 
    value={values.location.country } 
    onChange={event => {
    setFieldValue("location.country", event.target.value);
    }}
  >
    <option key={0} value={undefined}>
      -select-
    </option>
    {this.state.allCountries}
  </select>
</Form.Field>

这将呈现相似的（有点）选择元素，而不会出现速度慢的问题。

希望这会对某人有所帮助。

语义用户界面反应：Form.Select中的大型数据集会使Form变慢吗？

1 个答案: