如何更改 React 中的输入字段值？答案

【问题标题】：How to change Input fields values in React?如何更改 React 中的输入字段值？
【发布时间】：2020-10-16 13:18:04
【问题描述】：

我无法更改输入字段。有什么建议吗？

const MiddlePanel = ({ user }) => {

  const history = useHistory();

  const [data, setData] = useState({

    firstname: '',
    lastname: '',
    email: '',
    phoneNo: '',
  });

  const { firstname, lastname, email, phoneNo } = data;

  useEffect(() => {
    
    const fetchUser = async () => {

      const res = await axios.get(`http://localhost:5000/users/${user._id}`);
      setData({
        firstname: res.data.firstname,
        lastname: res.data.lastname,
        email: res.data.email,
        password: res.data.password,
      });
    };
    fetchUser();
  }, [user._id]);

  const handleChange = (e) => {

    setData({ ...data, [e.target.name]: e.target.value });

  };

  const handleSubmit = async (e) => {

    e.preventDefault();

    const newUser = { firstname, lastname, email, phoneNo };
    try {
      const config = {
        headers: {
          "Content-Type": "application/json",
        },
      };
      const body = JSON.stringify(newUser);
      await axios.patch(
        `http://localhost:5000/users/${user._id}`,
        body,
        config
      );
      history.push("/");
    } catch (err) {}
  };
 
 return (

    <div>
      <Form onSubmit={handleSubmit}>
        <Input
          type="text"
          name="firstname"
          onChange={handleChange}
          value={user.firstname}
        />
        <Input
          type="text"
          name="lastname"
          onChange={handleChange}
          value={user.lastname}
        />
        <Input
          type="email"
          name="email"
          onChange={handleChange}
          value={user.email}
        />
        <Input
          type="tel"
          name="phoneNo"
          onChange={handleChange}
          value={user.phoneNo}
        />
        <PrimaryButton className="btn btn-primary" style={{ width: "100%" }}>
          Update
        </PrimaryButton>
      </Form>
    </div>
  );
};

【问题讨论】：

哇，这段代码真的很难看，能不能请您花点时间正确格式化一下代码？
好的。很抱歉。

标签： reactjs

【解决方案1】：

我认为你应该使用 data.firstname 而不是 user 作为 value 属性

    <div>
      <Form onSubmit={handleSubmit}>
        <Input
          type="text"
          name="firstname"
          onChange={handleChange}
          value={data.firstname}
        />
        <Input
          type="text"
          name="lastname"
          onChange={handleChange}
          value={data.lastname}
        />
        <Input
          type="email"
          name="email"
          onChange={handleChange}
          value={data.email}
        />
        <Input
          type="tel"
          name="phoneNo"
          onChange={handleChange}
          value={data.phoneNo}
        />
        <PrimaryButton className="btn btn-primary" style={{ width: "100%" }}>
          Update
        </PrimaryButton>
      </Form>
    </div>

【讨论】：