我对 React 很陌生,我想弄清楚如果我将 value = {address.suburb} 放入我的 TextField 中,为什么我不能输入我的输入:
import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
const FlatAddress = (props) => {
const { navigation } = props;
const { address } = props.formData;
const onSubmit = (e) => {
e.preventDefault();
navigation.next();
console.log(address);
};
return (
<form onSubmit={onSubmit}>
<h1>This is flat address page</h1>
<TextField
id="outlined-basic"
variant="outlined"
label="Street number"
value={address.street}
onChange={props.setForm}
name="streetNumber"
margin="normal"
variant="standard"
autoComplete="off"
fullWidth
/>
</form>
);
};
export default FlatAddress;
这是我的另一个组件中的另一个组件:
import React from "react";
import { useForm, useStep } from "react-hooks-helper";
import FlatAddress from "./FlatAddress";
import FlatInfo from "./FlatInfo";
import FlatChecklist from "./FlatChecklist";
const defaultData = {
firstName: "",
lastName: "",
age: 0,
address: {
street: "",
suburb: "",
city: "",
country: "",
},
photo: "",
};
const steps = [{ id: "information" }, { id: "address" }, { id: "photo" }];
const Flat = (props) => {
const { user } = props;
const [formData, setForm] = useForm(defaultData);
const { step, navigation } = useStep({
steps,
initialStep: 0,
});
const prop = { formData, setForm, navigation };
switch (step.id) {
case "information":
return <FlatInfo {...prop} user={user} updateUser={props.updateUser} />;
case "address":
return (
<FlatAddress {...prop} user={user} updateUser={props.updateUser} />
);
case "photo":
return (
<FlatChecklist {...prop} user={user} updateUser={props.updateUser} />
);
}
return <h1>Flat Sign Up</h1>;
};
export default Flat;
我尝试了另一个组件(也是 TextField)并且它工作正常,但在这个组件中它不允许我输入任何内容。
似乎您在 TextField 上放置了错误的名称。您将其命名为streetNumber
,但值是address.street
变量。
通过阅读 react-hooks-helper 文档,似乎输入的名称必须与变量的名称相同
尝试这个:
<TextField
id="outlined-basic"
variant="outlined"
label="Street number" value = {address.street} onChange = {props.setForm}
name="adress.street" //changed name to match value variable
margin="normal"
variant="standard"
autoComplete="off"
fullWidth
/>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句