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

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 状态被分成多个对应于各个页面的路由，而 team 是这些路由之一，表单值应该在其中。表单数据应存储在 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 状态

Redux form is not storing input field values into redux state

reactjs

redux

redux-form

react-redux