时间戳

首页 > 解决方案 > 语义用户界面反应：Form.Select 中的大型数据集是否会使表单变慢？

reactjs - 语义用户界面反应：Form.Select 中的大型数据集是否会使表单变慢？

问题描述

我正在使用语义-ui-react 创建以下表单（内部模态）。

  <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}to options={[ { key: 1, value: "india", text: "india"} ]}，一切都开始正常工作。或者，如果我删除Form.Selectthen 表格也可以正常工作。

几个问题？

  1. 这是一个已知问题吗？
  2. 有哪些可能的解决方案？

标签： reactjshtmlsemantic-ui-react

解决方案

我发现这是Form.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>

这呈现类似（有点）选择元素，没有缓慢问题。

希望它会帮助某人。

推荐阅读