輸入顯示占位符而不是值

Question

我無法將輸入設置為顯示占位符而不是顯示 state 中的值。

  const initialState = [
    {
      name: "Chris",
      age: 0,
      height: 0,
      weight: 0,
    },
  ];

const [infoValue, setInfoValue] = useState(initialState)

    <div>
     <input type="number" placeholder={0} value={infoValue.age} onClick={} onChange={} />
    </div>

我可以在 onChange 或 onClick 中做些什么，用戶只需輸入他們的值而不必先刪除初始 0 嗎？

Answer 1

初始值為 0，因此它會顯示在該字段中。 空字符串可能有效。

 <input type="number" placeholder="0" value="" />

上面的代碼片段用於演示，您只需要在代碼中更改age屬性的值即可。

 const initialState = [
    {
      name: "Chris",
      age: '',
      height: 0,
      weight: 0,
    },
  ];

Answer 2

如果您希望 state 中的年齡以 0 開頭，這就是答案。

     const initialState = [
    {
      name: "Chris",
      age: 0,
      height: 0,
      weight: 0,
    },
  ];

const [infoValue, setInfoValue] = useState(initialState)

    <div>
     <input type="number" placeholder={0} value={infoValue.age||''} onClick={} onChange={} />
    </div>

Answer 3

您可以像我們正在做的那樣設置初始值，但是要隨着用戶鍵入新的年齡而改變，您可以這樣做：

  const initialState = {
  name: "Chris",
  age: 0,
  height: 0,
  weight: 0,
  },

;

const [infoValue, setInfoValue] = useState(initialState)

<div>
 <input type="number" placeholder={0} value={infoValue.age} onChange={(e) => setInfoValue({...infoValue, age: e.target.value )} />
</div>