Question

我正在使用react 15.6.1，react-redux 5.0.5和redux-form 7.0.3。

我目前面临的问题是，当我在Team中键入任何信息时，表单中没有显示文本，而redux状态一次只存储一个字符（即最后一个字符）字符）。下面是开发工具中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))))

减速器

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,
    ...
})

Answer 1

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

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

1 个答案: