redux-form - 带有 AsyncValidation 的 Redux 形式语义 UI

Question

需要帮忙

我按照这个例子http://redux-form.com/6.6.3/examples/submitValidation/ 和http://redux-form.com/6.6.3/examples/asyncValidation/

我使用 Semanitic-UI 并制作了一个加载状态 Redux-form 组件，代码如下：

语义输入的加载状态是：你可以在这里找到它

...
const ReduxFormInput = ({ input, label, placeholder, checkboxLabel, type, meta: { asyncValidate, touched, error } }) => {
  const errorMessage = (<div style={{ color: '#E20000', paddingTop: '.3rem', fontSize: '12px' }} >
    <Icon name="warning" />
    {error}
  </div>);

  return (
    <div>
      <Label>{label}</Label>
      <Input  // styled semantic-ui-react Input 
        {...input}
        type={type}
        placeholder={placeholder}
        error={error ? true : null}
        loading={asyncValidate ? true : undefined} // load loading state when submitting 
        icon={asyncValidate ? 'user' : undefined} // load icon state when submitting
      />
      {touched && error && errorMessage}
    </div>
  );
};

export default ReduxFormInput;

表单完美地工作，而不是语义 UI 组件中的异步加载状态不起作用。

太感谢了。

Answer 1

好的，我找到了答案

const ReduxFormInput = ({ input, label, placeholder, checkboxLabel, type, meta: { submitting, asyncValidate, touched, error } }) => ...

<Input
  {...input}
  type={type}
  placeholder={placeholder}
  error={error ? true : null}
  loading={submitting|| asyncValidate ? true : undefined} // ---> semantic-ui-react loading prop, state when submitting 
  icon={submitting|| asyncValidate ? 'user' : undefined} // ---> semantic-ui-react icon prop, load icon when submitting
/>