在反应中用 redux 形成

Question

所以我用react和redux制作了一个表单。但是，我不确定我是否完全理解 store 和 Provider。下面是我的组件的代码。为了便于阅读，我省略了导入。

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,
);

在反应中用 redux 形成

Form with redux in react

javascript

forms

provider

reactjs

redux