react 不会在输入更改时更新功能组件状态

Question

当我输入输入并更改时，editing.hours 不会更新输入值，但我在控制台中看到更新的值。

const nullableEntry = {
    ID: '',
    day: '',
    hours: 0.0,
    note: '',
};

const MonthTable = (props) => {
    const [editing, setEditing] = useState(nullableEntry);

    function handleHoursInput(e) {
        editing.hours = e.target.value;
        setEditing(editing);
    }

    return (
       <input type="number" value={editing.hours} step="0.01" onChange={handleHoursInput} className="form-control" name="" />
    );
};

export default MonthTable;

Answer 1

在 React 中，您应该避免进行状态突变，这意味着不要显式更改属于现有状态的内容。为了让 React 决定是否重新渲染以反映您的更改，它需要注册一个新状态。

养成创建状态的克隆或深层副本的好习惯，然后对其进行更新。

尝试这样的事情。在下面，我们使用扩展运算符{...}在更新状态之前克隆状态：

const nullableEntry = {
  ID: "",
  day: "",
  hours: 0.0,
  note: ""
};

const MonthTable = props => {
  const [editing, setEditing] = useState(nullableEntry);

  function handleHoursInput(e) {
    let newEdit = { ...editing };

    newEdit.hours = e.target.value;
    setEditing(newEdit);
  }

  return (
    <input
      type="number"
      value={editing.hours}
      step="0.01"
      onChange={handleHoursInput}
      className="form-control"
      name=""
    />
  );
};

工作沙箱：https : //codesandbox.io/s/hopeful-bogdan-lzl76

Answer 2

不改变状态，editing.hours = e.target.value改变原始状态

将您的handleHoursInput功能更改为这样的

function handleHoursInput(e) {
    let hours = e.target.value;
    setEditing({...editing, hours});
}