javascript - 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 决定是否重新渲染以反射(reflect)您的更改，它需要注册一个新状态。

养成创建状态的克隆或深拷贝，然后更新它的好习惯。

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

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