Reactjs Redux表单和语义UI,在更改时处理输入
我累坏了。我想用redux表单与React语义UI组件集成。字段组件不处理输入。我从键盘上输入了一些值,但什么也没发生,输入字段是空的。请有人帮忙,我做错了什么?我在这个话题上发现了一些相关的问题,但没有任何帮助Reactjs Redux表单和语义UI,在更改时处理输入,reactjs,redux,redux-form,semantic-ui-react,Reactjs,Redux,Redux Form,Semantic Ui React,我累坏了。我想用redux表单与React语义UI组件集成。字段组件不处理输入。我从键盘上输入了一些值,但什么也没发生,输入字段是空的。请有人帮忙,我做错了什么?我在这个话题上发现了一些相关的问题,但没有任何帮助 import React, { Component } from 'react'; import { Field, reduxForm } from 'redux-form'; import { Button, Form, Message, Progress, Checkbox } f
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Button, Form, Message, Progress, Checkbox } from 'semantic-ui-react';
const renderField = ({
label,
input,
name,
placeholder,
type,
meta: { touched, error, warning }
}) => (
<Form.Input required inline {...input} value={input.value} name={name} onChange={(param, {value}) => input.onChange(value)} label={label} placeholder={placeholder} />
)
const Registration = props => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<Form loading={false} onSubmit={handleSubmit}>
<Field
name="name"
type="text"
component={renderField}
label="Имя"
placeholder="введите ваше имя"
/>
<Field
name="email"
type="text"
component={renderField}
label="Email"
placeholder="введите действующую почту"
/>
<Field
name="password"
type="password"
component={renderField}
label="Password"
placeholder="придумайте пароль"
/>
<Field
name="confrim"
type="Confirm"
component={renderField}
label="Имя"
placeholder="повторите ваш пароль"
/>
<Form.Field>
<Checkbox name="agree" label='I agree to the Terms and Conditions' />
</Form.Field>
<Message
success
header='Form Completed'
content="You're all signed up for the newsletter"
/>
<Progress color="red" percent={100} />
<Button disabled={!pristine} type="submit">Ок</Button>
</Form>
)
}
export default reduxForm(
{form: 'registration'}
)(Registration)
伙计们,我找到了解决问题的办法。如果您正在使用redux,则需要将redux表单缩减器添加到应用程序缩减器中
import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
const reducers = {
// your reducer goes here
form: formReducer // All form data will store here in form state
}
const reducer = combineReducers(reducers)
const store = createStore(reducer)