Question

我一直在尝试使用redux表单创建新表单。我的输入表单没有输入任何值。

我的代码是：

import React, { Component } from "react"
import { Field, reduxForm } from "redux-form"

class BranchForm extends Component {
  textFieldComponent = ({ input }) => {
    console.log(input)
    return <input value={input.value} onChange={input.onChange} />
  }

  render() {
    return (
      <form >
        <Field
          name="Branch"
          label="Enter Branch"
          component={this.textFieldComponent}
        ></Field>
      </form>
    )
  }
}

export default reduxForm({ form: "branchForm" })(BranchForm)

reducer取自redux形式，并与其他分支reducer一起添加到combined reducer：

import { combineReducers } from "redux"
import { reducer as formReducer } from "redux-form"
import branchesReducer from "./branchesReducer"

export default combineReducers({
  branches: branchesReducer,
  forms: formReducer
})

这是我整个项目的index.js，我也使用过开发工具，

import React from "react"
import ReactDOM from "react-dom"
import Thunk from "redux-thunk"
import { createStore, applyMiddleware, compose } from "redux"
import { Provider } from "react-redux"

import App from "./components/App"
import reducers from "./Reducers"

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(reducers, composeEnhancers(applyMiddleware(Thunk)))

const rootElement = document.getElementById("root")
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

Answer 1

谢谢您的帮助，我犯了一个非常愚蠢的错误。

解决方案是在导出默认语句的分支表单的最后一行中，我给出的是表单而不是导出时的表单。

Answer 2

问题是您没有给this.textFieldComponent函数提供任何参数。您可以尝试这样

import React, { Component } from "react"
import { Field, reduxForm } from "redux-form"

    class BranchForm extends Component {
      textFieldComponent = ({ input }) => {
        console.log(input)
        return <input value={input.value} onChange={input.onChange} />
      }

      render() {
        const input= {
            value: this.props.value,
            onChange: this.props.onChange
        }
        return (
          <form >
            <Field
              name="Branch"
              label="Enter Branch"
              component={this.textFieldComponent(input)}
            ></Field>
          </form>
        )
      }
    }

    export default reduxForm({ form: "branchForm" })(BranchForm)

Redux表单没有任何值

2 个答案: