为什么文本框不接受任何输入，我想对表单上的所有formData提交操作？

Question

我为此表格（React-with-redux）尝试了太多次，我的文本框未输入任何内容，请建议我，

朋友，谢谢您

import React from 'react';
import './login.css';
import {connect} from 'react-redux'
import { change, Field, reduxForm } from 'redux-form';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

import { login } from './Actions';


export const renderTextField = ({
  input,
  label,
  id,
  multiLine,
  rowsMax,
  fullWidth,
  disabled,
  hintText,
  defaultValue,
  onChange,
  maxLength,
  loader,
  meta: { touched, error },
  customError,
  autoFocus,
  floatingLabelFixed,
  ...custom
}) => {
  return (
    <TextField
      id={id}
      defaultValue={defaultValue}
      autoFocus={autoFocus}
      floatingLabelText={label}
      floatingLabelFixed={floatingLabelFixed}
      errorText={touched && (error || customError)}
      multiLine={multiLine}
      hintText={hintText}
      rowsMax={rowsMax}
      disabled={disabled}
      fullWidth={true}
      className="valuefont"
      autoComplete='new-type'
      onChange={(event) => onChange}
      maxLength={maxLength}
      floatingLabelStyle={{ top: '30px', color: '#7a7a7a' }}
      floatingLabelFocusStyle={{ color: '#01B9C1' }}
      style={{ height: '62px ' }}
      inputStyle={{ marginTop: '10px' }}
      {...input}
      {...custom}
    />

  );
};


class Login extends React.Component{

constructor(props){
        super(props);
}

handleChange = (e)=>{
    // setValues({ ...values, [e.target.name]: e.target.value });
}

onSubmit = (formProps)=>{
    debugger
}
    render(){
        const { handleSubmit } = this.props;
        return(
            <form noValidate onSubmit={handleSubmit(this.onSubmit)}>
             <div>
                <Field
                  name="firstName"
                  component={renderTextField}
                  label="First Name"
                />
              </div>
                 <Button variant="contained" color="primary" type="submit">
                    Login
                  </Button>
            </form>
        )
    }
}

const mapStateToProps = (state)=>{
    return {
        loading : state.loginReducer.loading,
        error : state.loginReducer.error
    }
}

export default connect(mapStateToProps,{login})(reduxForm({
  form: 'LoginForm',
  keepDirtyOnReinitialize: true,
  enableReinitialize: true,
})(Login))

Answer 1

使用renderTextField代替Field

import React from 'react';
import './login.css';
import {connect} from 'react-redux'
import { change, Field, reduxForm } from 'redux-form';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

import { login } from './Actions';


export const renderTextField = ({
  input,
  label,
  id,
  multiLine,
  rowsMax,
  fullWidth,
  disabled,
  hintText,
  defaultValue,
  onChange,
  maxLength,
  loader,
  meta: { touched, error },
  customError,
  autoFocus,
  floatingLabelFixed,
  ...custom
}) => {
  return (
    <TextField
      id={id}
      defaultValue={defaultValue}
      autoFocus={autoFocus}
      floatingLabelText={label}
      floatingLabelFixed={floatingLabelFixed}
      errorText={touched && (error || customError)}
      multiLine={multiLine}
      hintText={hintText}
      rowsMax={rowsMax}
      disabled={disabled}
      fullWidth={true}
      className="valuefont"
      autoComplete='new-type'
      onChange={(event) => onChange}
      maxLength={maxLength}
      floatingLabelStyle={{ top: '30px', color: '#7a7a7a' }}
      floatingLabelFocusStyle={{ color: '#01B9C1' }}
      style={{ height: '62px ' }}
      inputStyle={{ marginTop: '10px' }}
      {...input}
      {...custom}
    />

  );
};


class Login extends React.Component{

constructor(props){
        super(props);
}

handleChange = (e)=>{
    // setValues({ ...values, [e.target.name]: e.target.value });
}

onSubmit = (formProps)=>{
    debugger
}
    render(){
        const { handleSubmit } = this.props;
        return(
            <form noValidate onSubmit={handleSubmit(this.onSubmit)}>
             <div>
                <renderTextField
                  name="firstName"
                  label="First Name"
                  onChange={this.handleChange}
                />
              </div>
                 <Button variant="contained" color="primary" type="submit">
                    Login
                  </Button>
            </form>
        )
    }
}

const mapStateToProps = (state)=>{
    return {
        loading : state.loginReducer.loading,
        error : state.loginReducer.error
    }
}

export default connect(mapStateToProps,{login})(reduxForm({
  form: 'LoginForm',
  keepDirtyOnReinitialize: true,
  enableReinitialize: true,
})(Login))