输入类型＆＃34;日期＆＃34;没有显示新的价值

Question

我的输入类型为＆＃34; date＆＃34;：

<input type="date" value="2016-08-16"/>

当我加载页面时，我可以看到选择了指定的日期。

但是，如果我尝试选择另一个日期 - 例如2016年8月11日 - 输入中的值不会更新，并且始终是2016年8月16日。

我在Chrome版本53.0.2785.116（64位）中测试页面。我想念元素宣言中的某些内容吗？

Answer 1

您需要使用变量处理输入值。

const [user, setUser] = useState({ name: "James", age: 33 });
  const [newUserName, setNewUserName] = useState("");
  const [newUserAge, setNewUserAge] = useState(user.age);

  const changeName = () => {
    setUser({
      name: "Joe",
      age: 25
    });
  };

  function changeUserName(e) {
    setNewUserName(e.target.value);
  }

  function changeUserAge(e) {
    setNewUserAge(e.target.value);
  }

  return (
    <>
      <div>{user.name}</div>

      <div>{user.age}</div>

      <input
        type="text"
        value={newUserName}
        onChange={changeUserName}
        placeholder="new user name"
      />
      <input
        type="number"
        value={newUserAge}
        onChange={changeUserAge}
        placeholder="new user age"
      />
      <button onClick={changeName}> change </button>
    </>
  );