Question

所以我使用react和redux创建了一个表单。但是，我不确定我完全理解商店和提供商。下面是我的组件的代码。为了便于阅读，我省略了导入。

const validate = values => {
  const errors = {}
  const requiredFields = [
    'Brukernavn',
    'epost',
    'rolle'
  ]
  requiredFields.forEach(field => {
    if (!values[field]) {
      errors[field] = 'Required'
    }
  })
  if (
    values.epost &&
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.epost)
  ) {
    errors.epost = 'Ugyldig E-post!'
  }
  return errors
}

const renderTextField = ({
  input,
  label,
  meta: { touched, error },
  ...custom
}) => (
  <TextField
    hintText={label}
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    {...custom}
  />
)


const renderRadioGroup = ({ input, ...rest }) => (
  <RadioButtonGroup
    {...input}
    {...rest}
    valueSelected={input.value}
    onChange={(event, value) => input.onChange(value)}
  />
)

const renderSelectField = ({
  input,
  label,
  meta: { touched, error },
  children,
  ...custom
}) => (
  <SelectField
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    onChange={(event, index, value) => input.onChange(value)}
    children={children}
    {...custom}
  />
)

const MaterialUiForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field
          name="brukernavn"
          component={renderTextField}
          label="Brukernavn"
        />
      </div>
      <div>
        <Field name="epost" component={renderTextField} label="E-Post" />
      </div>
      <div>
        <Field name="rolle" component={renderRadioGroup}>
          <RadioButton value="Student" label="Student" />
          <RadioButton value="Helsepersonell" label="Helsepersonell" />
        </Field>
      </div>
        <div>
        <Submitbutton fieldName="Submit" id="submitForSignup" disabled={pristine || submitting} />
      {/*  <Submitbutton type="button" disabled={pristine || submitting} onClick={reset} /> */}
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'MaterialUiForm', // Formens ID
  validate,
})(MaterialUiForm)

现在，我已经发现，如果我用以下内容替换我的index.js，它会显示出来，但这对我项目其余部分的结构来说并不理想。

const rootEl = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider muiTheme={getMuiTheme()}>
      <div style={{ padding: 15 }}>
        <h2>Velkommen til GloBro!</h2>

        <MaterialUiForm onSubmit={showResults} />
        <Values form="MaterialUiForm" />
      </div>
    </MuiThemeProvider>
  </Provider>,
  rootEl,
);

export default rootEl;

是否有办法让我可以像使用我的根App组件中的任何其他组件一样调用此组件，即;

class App extends Component {
  render() {
    return (
      <div className="App" style={{display: 'flex', justifyContent: 'left', }}>
        <Login />
      </div>
    );
  }
}
export default App;

Answer 1

只要你的组件是Provider组件的后代，你应该是好的。

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider muiTheme={getMuiTheme()}>
      <App />
    </MuiThemeProvider>
  </Provider>,
  rootEl,
);

形成与还原反应

1 个答案: