【问题标题】:Can't type in redux-form Field无法输入 redux-form 字段
【发布时间】:2023-03-18 10:40:01
【问题描述】:

我无法在表单字段中输入任何内容。我搜索了解决方案,但没有找到解决问题的方法。看看类似的问题,这可能是一个减速器问题。那我做错了什么?

使用:react 15.4.2、redux-form 6.5.0、react-router 3.0.2

LoginForm.js

class LoginForm extends React.Component {

    onSubmit(values) {
        console.log(values.email)
    }

    render() {

        var { handleSubmit } = this.props; // Provided by redux-form

        return (
            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
              <label>E-mail</label>
              <Field name='email' component='input' type='text' />
              <button type="submit">Login</button> 
            </form>
        )
    }
}

const form = reduxForm({
    form: 'LoginForm'
})

export default connect(mapStateToProps)(form(LoginForm));

reducers.js

const combinedReducers = combineReducers({
    form: formReducer
});

export default combinedReducers;

index.js

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

// temp
const Dashboard = () => { return <div>Dasboard</div> };

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(combinedReducers)}>
    <Router history={browserHistory}>
      <Route path="/" component={LoginForm} />
      <Route pathp="dashboard" component={Dashboard} />
    </Router>
  </Provider>
  ,
  document.getElementById('app')
);

【问题讨论】:

  • 您需要提供更多详细信息。我已经复制了您的代码,它按预期工作。您可以在此处查看代码:webpackbin.com/bins/-Kf13qs_C-9323-46SGH.
  • 你有什么错误吗?
  • @DeividasKaržinauskas tnx 用于回复和测试我的代码。因为它对你有用,所以代码应该没问题。那么这可能是我的设置。我应该提供哪些细节?这是一个非常简单的应用程序,没有更多可展示的内容。
  • 你能解释一下“我不能输入任何东西”是什么意思吗?输入字段是否已禁用或无响应?您收到错误消息吗?
  • 当我在字段中单击并尝试键入任何未显示在归档中的内容时。没有消息,没有错误,没有控制台日志。字段正在做某事,因为我可以看到字段中的光标响应输入(这意味着指示您正在输入的位置的闪烁光标在输入过程中停止闪烁,因此它接收输入)。

标签: reactjs redux redux-form


【解决方案1】:

好的,我仍然不知道出了什么问题,但是在我重新安装了 react、react-redux 和 redux-form 之后,一切正常。

Tnx 到 @Deividas Karžinauskas 寻求帮助和时间。多亏了他的回答,我才知道代码没问题,而且它必须是别的东西。

【讨论】:

  • 除了pathp,我在您的代码中看不到任何明显的错误。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-24
  • 1970-01-01
  • 2021-09-29
相关资源
最近更新 更多