Question

我正在使用reactjs，redux形式和语义UI来构建应用程序。以下代码在IE11，Edge和Chrome中的行为不同。我已经将polyfill包含在index.js中

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

在IE11中，输入将使用清除按钮呈现，并且效果很好。

在Chrome中，输入没有清除按钮。

在边缘，输入具有清除按钮，但是单击后无法清除输入。

我为此问题创建了一个演示项目： https://codesandbox.io/s/redux-form-field-level-validation-zedcu?fontsize=14

谁能告诉我为什么它不能在边缘工作？感谢帮助。

import React from "react";
import { Field } from "redux-form";
import { Form } from "semantic-ui-react";
import RenderFieldInput from "../../formElements/Input";
import RenderFieldSelect from "../../formElements/Select";
import { YES_NO } from "../../formElements/SelectOptions";
import { required, email } from "redux-form-validators";
import { createNumberMask, createTextMask } from 'redux-form-input-masks';

const currencyMask = createNumberMask({
  prefix: '$ ',
  suffix: '',
  decimalPlaces: 2,
  locale: 'en-US',
})

const BorrAttributes = () => {
  return (
    <div>
      <Form.Group widths="equal">
        <Field
          name="email"
          component={RenderFieldInput}
          label="Email"
          required="Y"
          validate={[required(), email()]}
        />
        <Field
          name="secondEmail"
          component={RenderFieldInput}
          label="Second Email"
          validate={[email()]}
        />
      </Form.Group>
    </div>
  );
};

export default BorrAttributes;

import React from "react";
import { Form, Popup } from "semantic-ui-react";
import Tooltip from "./Tooltip";

const RenderFieldInput = ({
  input,
  label,
  placeholder,
  required,
  meta: { touched, error, warning }
}) => (
  <Popup
    trigger={
      <Form.Input
        {...input}
        label={label}
        placeholder={placeholder}
        error={error ? true : null}
        required={required === "Y" ? true : null}
        fluid
      />
    }
  >
    <Tooltip touched={touched} error={error} warning={warning} />
  </Popup>
);

export default RenderFieldInput;

Answer 1

这是Microsoft Edge https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17584515/

的已知问题

Answer 2

该问题与“ RenderFieldInput”组件有关，也许与弹出窗口有关，我认为您可以将此问题反馈给Semantic-UI-React forum。

作为临时的解决方法，您可以尝试删除此组件。代码如下：

const FieldLevelValidationForm = props => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component="input"
        validate={[required()]}
        label="Username"
      />
    </form>
  );
};

有关语义UI反应弹出窗口的更多详细信息，您可以检查this link

输入清除按钮在Microsoft Edge中不起作用

2 个答案: