处理使用 material-ui 程式化的 redux 表单的表单道具

Question

我正在尝试创建一个登录表单，使 API 调用 who returns 作为令牌。我是 React 和 redux 的新手，所以我遵循了 this tutorial.

登录表单是redux-form。这是代码：

login.js

import React, { Component } from 'react';  
import { connect } from 'react-redux';  
import { Field, reduxForm } from 'redux-form';  
import { loginUser } from '../../actions/index';

const form = reduxForm({  
  form: 'login'
});

class Login extends Component {  
  handleFormSubmit(formProps) {
    this.props.loginUser(formProps);
  }

  renderAlert() {
    if(this.props.errorMessage) {
      return (
        <div>
          <span><strong>Error!</strong> {this.props.errorMessage}</span>
        </div>
      );
    }
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <div>
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
        {this.renderAlert()}
        {/* {this.renderAlert.bind(this)} */}
          <div>
            <label>Username</label>
            <Field name="username" component="input" type="text" />
          </div>
          <div>
            <label>Password</label>
            <Field name="password" component="input" type="password" />
          </div>
          <button type="submit">Login</button>
        </form>
      </div>
    );
  }
}

function mapStateToProps(state) {  
  return {
    errorMessage: state.auth.error,
    message: state.auth.message
  };
}

export default connect(mapStateToProps, { loginUser })(form(Login));

提交表单时，道具（{用户名，密码}）被传递给 HandleFormSubmit，然后传递给 loginUser 函数，该函数是为调用登录而创建的 redux 操作 API。这非常有效，但现在我正在尝试整合 Material Ui 以对表单字段进行样式化。

// input basic version
<Field name="username" component="input" type="text" />
// material-ui version 
<Field name="username" component={TextField} type="text" />

通过此更改，道具用户名和密码不会传递给 handleFormSubmit 函数，因此我无法实现正确的 API 调用来登录用户。所以我需要你的帮助来解决这个问题。

Answer 1

您需要从 redux-form 提供给 material-ui 组件的道具中引入一个转换层。 redux-form 文档 here.

中对此进行了介绍

对于 TextField 这看起来像这样：

const renderTextField = ({
  input,
  label,
  meta: { touched, error },
  ...custom
}) => (
  <TextField
    hintText={label}
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    {...custom}
  />
)

然后将其作为组件传递给 Field:

<Field name="username" component={renderTextField} />

还有一个库已经包含了您可能需要的大部分包装器，您可以 import 并像调用 redux-form-material-ui 一样使用它。

处理使用 material-ui 程式化的 redux 表单的表单道具

Handle form props of a redux-form stylised with material-ui

reactjs

redux

material-ui

redux-form

react-redux