Question

似乎我无法让表格在每次击键时重新渲染。我一定做错了什么我不知道它是什么。 GetStartedForm函数永远不会运行两次，包含Field输入的函数也不会运行。

使用redux表单

const GetStartedForm = (props) => {
  const {
    handleSubmit,
    pristine
  } = props;
  return (
    <Form onSubmit={handleSubmit}>
          <Field
            name="email"
            component={FormField}
            type="text"
            size="xl"
            placeholder="Email Address"
            autoComplete="email"
            validate={[required(), email()]}
          />
          <Button
            disabled={pristine}>Get Started</Button>
    </Form>
  );
}
export default reduxForm({ form: 'getstarted' })(GetStartedForm);

实施

          <GetStarted onSubmit={e => {
            console.log(e);
          }} />

输入字段

const TextField = props => {
  const { input, meta, size } = props;
  console.log(props);
  const properties = meta.uncontrolled ? {
    defaultValue: props.defaultValue
  } : {
    value: input.value
  };
  return (
    <React.Fragment>
      {props.label && (
        <label htmlFor={input.name} className="form__label">
          {props.label}
          {props.required ? ' *' : null}
        </label>
      )}
      <Input
        type={props.type ? props.type : 'text'}
        className={props.className}
        name={input.name}
        id={input.name}
        size={props.size}
        readOnly={props.readOnly}
        onChange={input.onChange}
        autoFocus={props.autoFocus}
        autoComplete={props.autoComplete}
        placeholder={props.placeholder}
        {...properties}
      />
      {meta.touched && meta.error ? (
        <div className="form__field-error">{meta.error}</div>
      ) : null}
    </React.Fragment>
  );
};

当我像这样不受控制地传递时，我能够将文本至少显示在我的屏幕上，但我似乎无法让表单功能再次运行，这意味着我的按钮被卡在禁用状态（原始）的

          <Field
            name="email"
            component={FormField}
            type="text"
            size="xl"
            placeholder="Email Address"
            autoComplete="email"
            validate={[required(), email()]}
            meta={{uncontrolled: true}}
          />

是设置减速器

/**
 * Combine all reducers in this file and export the combined reducers.
 */

import { fromJS } from 'immutable';
import { combineReducers } from 'redux-immutable';
import { LOCATION_CHANGE } from 'react-router-redux';
import { reducer as formReducer } from 'redux-form';
import {
  LOGOUT_USER_REQUEST
} from 'constants'

import globalReducer from 'containers/App/reducer';
import languageProviderReducer from 'containers/LanguageProvider/reducer';

/*
 * routeReducer
 *
 * The reducer merges route location changes into our immutable state.
 * The change is necessitated by moving to react-router-redux@5
 *
 */

// Initial routing state
const routeInitialState = fromJS({
  location: null,
});

/**
 * Merge route into the global application state
 */
function routeReducer(state = routeInitialState, action) {
  switch (action.type) {
    /* istanbul ignore next */
    case LOCATION_CHANGE:
      return state.merge({
        location: action.payload,
      });
    default:
      return state;
  }
}

/**
 * Creates the main reducer with the dynamically injected ones
 */
export default function createReducer(injectedReducers) {
  const composite = combineReducers({
    route: routeReducer,
    global: globalReducer,
    language: languageProviderReducer,
    form: formReducer,
    ...injectedReducers,
  });

  return rootReducer;

  function rootReducer(state_, action) {
    let state = state_;
    if (action.type === LOGOUT_USER_REQUEST) {
      state = null;
    }
    return composite(state, action);
  }
}

Answer 1

我刚刚意识到这个反应样板使用了不可变的基础，因此我必须在redux-form/immutable

的任何地方导入redux-form

Redux表单拒绝更新

1 个答案: