React - 如何在狀態更改時更改循環內的輸入值

Question

我是新手，我偶然發現了一個需要幫助的問題。 我正在放置多個輸入元素，並且我試圖根據狀態更改來更改它們的值，在這種情況下是手動的（真或假）；

該代碼是一種簡單的形式，其中通過循環在內部有 12 個輸入。 我的問題是，根據手冊是真還是假，我想更改輸入值。

如果手動返回 true，我希望它正常運行（正常輸入），但是當手動返回 false 時，我希望所有輸入值都顯示數字 12，反之亦然。 手動狀態由一個按鈕觸發，如下所示。

我在這里有兩個問題：

1. 如果我將該值設置為空字符串，則無法更新它
2. 如果我調節顯示內容，如果我有兩個輸入 - 一個有值，一個沒有基於返回的手動狀態，我會得到控制和不受控制的錯誤。

誰能幫我實現這個？ 我嘗試使用多種解決方案但沒有成功：

import React, {useState, useEffect, useRef} from 'react';

function App() {

    const [budget, setBudget] = useState([])
    const [manual, setManual] = useState(false);

    const handleInput = inputEv =>{
        const budgetState = budget;
        const input = {index: inputEv.target.getAttribute('index'), value: inputEv.target.value};
        
        // if data input already exists - update it
        if(budgetState.some(data=>data.index === input.index)){
            var current = budgetState.find(data=>data.index === input.index);
            current.value = input.value;
        } else {
            budgetState.push(input)
            setBudget(budgetState);
        }
    }

    return (
        <div>
            <form className="inputs">
            {Array(12).fill().map((e, index)=>(
                <div  key={index} className="month">
                    <input type="text" onChange={handleInput} index={index} disabled={manual ? false : true}/>
                </div>
            ))}
            </form>
            <button onClick={()=>setManual(!manual)}>Click</button>
        </div>
    );
}

export default App;

Answer 1

在開始邏輯部分之前，您首先必須將state聲明為：

const length = 12;
const [budget, setBudget] = useState(Array.from({ length }, () => 12));
const [manual, setManual] = useState(false);

現場演示

您必須考慮兩種情況：

1) When you click on the button which will toggle to manual value

它將調用一個函數changeManual其定義為：

function changeManual() {
  if (manual) setBudget((state) => state.map((o) => 12));
  else setBudget(budget);

  setManual(!manual);
}

2） When you input on one of the input HTML element then you have to update the respective value in an array.

您需要event和index ，因此您可以調用一個函數，該函數在內部將值作為

<input
  type="text"
  value={budget[index]}
  onChange={(e) => handleInput(e, index)}
  disabled={manual ? false : true}
/>

這將觸發handleInput函數，其定義為

const handleInput = (inputEv, index) => {
  const value = inputEv.target.value;
  setBudget((state) => state.map((val, i) => (i !== index ? val : value)));
};

Answer 2

function App() {
  const [input, setInput] = useState("");
  const [manual, setManual] = useState(false);

  const handleToggle = () => {
    setManual(!manual);
    if (manual === true) {
      setInput("");
    } else {
      setInput("12");
    }
  };

  return (
    <div>
      <form className="inputs">
        {Array(12)
          .fill()
          .map((e, index) => (
            <div key={index} className="month">
              <input type="text" value={input} />
            </div>
          ))}
      </form>
      <button onClick={handleToggle}>Click</button>
    </div>
  );
}

export default App;