使用钩子响应输入更改默认值

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 的默认值。但是，我无法更改 onChange 方法。

请看看我该如何处理。

或任何其他方式来处理这个问题

谢谢

Answer 1

您不需要使用onChange 或useEffect 来设置默认值，只需使用CustomTextField 和useState 中给出的道具设置value：

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" />;
}