Question

嗨，我是 React 的新手，我无法理解一些基本的东西。

其中一件事如下。

为什么在 textarea 元素上调用带有 onChange 的函数时 itemData 的状态会发生变化，如下例所示：

    import React, { useEffect, useState } from "react";
function Createitem() {
  const [itemData, setitemData] = useState([]);
  const handleitemData = (e) => {
    setitemData({
      itemTime: Date.now(),
      itemText: e.target.value,
    });
  };
  useEffect(() => {
    console.log("item", itemData);
  }, [itemData]);
  return (
    <div className="itemBox">
      <div>
        <form>
          <textarea
            onChange={handleitemData}
            placeholder="What you have in mind ..."
          ></textarea>
          <button type="submit">item</button>
        </form>
      </div>
    </div>
  );
}
export default Createitem;

但不是在表单元素上使用 onSubmit 调用函数时，如本例所示：

    import React, { useEffect, useState } from "react";
function Createitem() {
  const [itemData, setitemData] = useState([]);
  const handleitemData = (e) => {
    setitemData({
      itemTime: Date.now(),
      itemText: e.target.value,
    });
  };
  useEffect(() => {
    console.log("item", itemData);
  }, [itemData]);
  return (
    <div className="itemBox">
      <div>
        <form onSubmit={handleitemData}>
          <textarea placeholder="What you have in mind ..."></textarea>
          <button type="submit">item</button>
        </form>
      </div>
    </div>
  );
}
export default Createitem;

我知道 React 的方法是，如果这不起作用，请尝试其他方法，但我正在尝试真正了解正在发生的事情。

感谢您的回复。

Answer 1

您必须阻止浏览器在提交时的默认行为：

import React, { useEffect, useState } from "react";
function Createitem() {
  const [itemData, setitemData] = useState([]);
  const handleitemData = (e) => {
//The line below is necessary
    e.preventDefault() 
    setitemData({
      itemTime: Date.now(),
      itemText: e.target.value,
    });
  };
  useEffect(() => {
    console.log("item", itemData);
  }, [itemData]);
  return (
    <div className="itemBox">
      <div>
        <form onSubmit={handleitemData}>
          <textarea placeholder="What you have in mind ..."></textarea>
          <button type="submit">item</button>
        </form>
      </div>
    </div>
  );
}
export default Createitem;

附加的是一个沙箱，可以查看它的实际效果https://codesandbox.io/s/infallible-lederberg-3oj1w?file=/src/App.js:0-630

ReactJS 在功能组件中设置状态的基本问题

1 个答案: