React.js-通过组件传递函数-“ handleChange不是函数”

问题描述 投票:0回答:1

我不知道该怎么办。在其他应用程序中,我已对其进行了编程,但是这次我不知道出了什么问题。我试图通过一个组件传递一个函数,它告诉我该函数不是一个函数。

用户表单:我想创建包含步骤的用户表单。我创建了handleChange,并尝试将其传递给FormUserDetails组件。

import React, { Component } from "react";

// Components
import FormUserDetails from "./FormPersonalDetails";

export class UserForm extends Component {
  state = {
    step: 1,
    firstName: "",
    lastName: "",
    email: "",
    occupation: "",
    city: "",
    bio: "",
  };

  // Proceed to next step
  nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1,
    });
  };

  // Go back to prev step
  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1,
    });
  };

  // Handle fields change
  handleChange = (input) => (e) => {
    this.setState({ [input]: e.target.value });
  };

  render() {
    const { step } = this.state;
    const { firstName, lastName, email, occupation, city, bio } = this.state;
    const values = { firstName, lastName, email, occupation, city, bio };

    switch (step) {
      case 1:
        return <FormUserDetails nextStep={this.nextStep} handleChange={this.handleChange} values={values} />;
      case 2:
        return <h1>FormPersonalDetails</h1>;
      case 3:
        return <h1>Confirm</h1>;
      case 4:
        return <h1>Success</h1>;
      default:
        return console.log("This is a multi-step form built with React.");
    }
  }
}

export default UserForm;

Component:在组件内部,我尝试不通过props来获取它,但是我得到的是控制台日志中的未定义prop值和“ TypeError:handleChange不是函数”。我一定是瞎子,看不出有什么问题。

import React, { Component } from "react";

// Styles
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import AppBar from "material-ui/AppBar";
import TextField from "material-ui/TextField";
import RaisedButton from "material-ui/RaisedButton";

export class FormUserDetails extends Component {
  continue = (e) => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values, handleChange } = this.props;
    console.log(handleChange, "Handle Change");
    return (
      <MuiThemeProvider>
        <React.Fragment>
          <AppBar title="Enter User Details" />
          <br />
          <TextField placeholder="Enter Your First Name" label="First Name" onChange={handleChange("firstName")} defaultValue={values.firstName} />
          <br />
          <TextField hintText="Enter Your Last Name" floatingLabelText="Last Name" onChange={handleChange("lastName")} defaultValue={values.lastName} />
          <br />
          <TextField hintText="Enter Your Email" floatingLabelText="Email" onChange={handleChange("email")} defaultValue={values.email} />
          <br />
          <RaisedButton label="Continue" primary={true} style={styles.button} onClick={this.continue} />
        </React.Fragment>
      </MuiThemeProvider>
    );
  }
}

const styles = {
  button: {
    margin: 15,
  },
};

export default FormUserDetails;

感谢您的帮助。

javascript reactjs components
1个回答
0
投票

实际上,这里的一切看起来都很不错。我建议仔细检查导入(路径并检查默认情况下是否正确导入,也许应该使用{ }显式导入)。

© www.soinside.com 2019 - 2024. All rights reserved.