首页 文章

Redux表单不将输入字段值存储到redux状态

提问于
浏览
0

我正在使用 react 15.6.1react-redux 5.0.5redux-form 7.0.3 .

我目前面临的问题是,当我在 Team 中键入任何信息时,文本没有显示在表单中,而redux状态一次只存储一个字符(即最后输入的字符) . 下面是dev工具的redux操作状态的快照 .

type: "@@redux-form/CHANGE
meta: { form: "addTeam", field: "team", touch: true }
payload: "A"

因此,正在调度相关操作,但状态未正确更新 . 我们的redux状态被分成多个路由,这些路由对应于各个页面,团队是其中一个路径,其中的形式值应该是 . 表格数据应存储在 state.routes.team.form

这是 index.js

const renderField = ({ input, label, type }) => (
    <div>
        <label>{label}</label>
        <div>
            <input {...input} placeholder={label} type={type} />
        </div>
    </div>
)

const AddTeam = ({ basepath, onSubmit, theme, submitting }) => (
    <FormContainer>
        <FormHeader>Add <span>Team</span></FormHeader>
        <form className={styles[theme]} onSubmit={(event, store) => onSubmit(addAdapter(store.state))}>
            <Field
                component={renderField}
                label="Team"
                type="text"
                name="team"
            />
            <Field
                label="Description"
                name="description"
                type="text"
                component={renderField}
            />
            {/* If there is no Submit button in form, HTML does not submit it on Enter key while field is focued */}
            <input type="submit" style={{ display: 'none' }} />
        </form>
        <FormFooter>
            <button type="button" onClick={() => History.push(basepath)}>CANCEL</button>
            <button type="submit" disabled={submitting}>CREATE</button>
        </FormFooter>
    </FormContainer>
)

renderField.propTypes = {
    input: PropTypes.object.isRequired,
    label: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired
}

AddTeam.propTypes = {
    basepath: PropTypes.string.isRequired,
    onSubmit: PropTypes.func.isRequired,
    theme: PropTypes.string.isRequired,
    submitting: PropTypes.bool
}

const mapDispatchToProps = {
    onSubmit: ACTION_CREATORS.ADD_TEAM
}

export default (connect(null, mapDispatchToProps)(reduxForm({ form: 'addTeam' })(themable(AddTeam))))

reducer

import { combineReducers } from 'redux'
import { reducer } from 'redux-form'
import {
...
} from 'state/store/shared/reducers'
import { teamAdapter } from 'state/store/routes/teams/adapters'
import KEYS from 'state/store/shared/keys'

export default combineReducers({
    form: reducer,
    ...
})

1 回答

  • 0

    默认情况下,Redux表单将文本存储在reducer的 form slice下,因此表单数据位于 getState().form.addTeam 下 . 为了从应用程序的另一部分中获取表单中的数据,redux表单建议您使用selectors provided .

相关问题