我不知道该怎么办。在其他应用程序中,我已对其进行了编程,但是这次我不知道出了什么问题。我试图通过一个组件传递一个函数,它告诉我该函数不是一个函数。
用户表单:我想创建包含步骤的用户表单。我创建了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;
感谢您的帮助。
实际上,这里的一切看起来都很不错。我建议仔细检查导入(路径并检查默认情况下是否正确导入,也许应该使用{ }
显式导入)。