使用钩子反应输入chnage默认值

Question

const [firstName, setFirstName] = useState(null)

useEffect(() => {
    if (props.profile && props.profile.profile) {
        setFirstName(props.profile.first_name)
    }
})


return (
    <div>
        <CustomTextField
                    className={classes.InputField}
                    variant="outlined"
                    name="firstname"
                    type="text"
                    fullWidth
                    placeholder=""
                    onChange={e => setFirstName(e.target.value)}
                    value={firstName}
                />
    </div>
)

这里我使用的是react hooks状态

在这里，我试图改变来自API的默认值。但是，我不能在改变方法上改变。

谢谢

Answer 1

您不需要使用onchange或useEffect来设置默认值，只需使用CustomTextField和usestast中给出的道具来设置值:

import { Input } from "@material-ui/core";
import "./styles.css";
import * as React from "react";

export function CustomTextField(props) {
  const [firstName, setFirstName] = React.useState(props.firstName);
  return (
    <Input
      onChange={(e) => {
        setFirstName(e.target.value);
      }}
      variant="outlined"
      name="firstname"
      type="text"
      value={firstName}
    />
  );
}

export default function App() {
  return <CustomTextField firstName="Kiran" />;
}