[英]Form with redux in react
So I have made a form using react and redux. 因此,我已经使用react和redux制作了表单。 However, I'm not sure I totally understand store and Provider.
但是,我不确定我是否完全了解商店和提供者。 Below is the code for my component.
以下是我的组件的代码。 I've omitted imports for readability.
为了便于阅读,我省略了导入。
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)
Now, I've figured out that if I replace my index.js with the following, it shows up, but that's not ideal for the structure of the rest of my project. 现在,我发现如果将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;
Is there a way that makes it possible for me to call this component as with any other from my root App component, ie; 有没有一种方法可以使我像从根App组件中调用其他组件一样进行调用,即;
class App extends Component {
render() {
return (
<div className="App" style={{display: 'flex', justifyContent: 'left', }}>
<Login />
</div>
);
}
}
export default App;
So long as your component is a descendant of the Provider
component, you should be good. 只要您的组件是
Provider
组件的后代,您就应该很好。
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider muiTheme={getMuiTheme()}>
<App />
</MuiThemeProvider>
</Provider>,
rootEl,
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.