Question

需要帮助

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

我使用Semanitic-UI＆amp;将加载状态Redux-form组件作为下面的代码：

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

...
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;

表单在semantic-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
/>

使用AsyncValidation的Redux形式语义UI

1 个答案: