无法编辑我的输入字段小于他的 mainRate

Question

在此输入中，当停留天数大于 1 时，我无法在 mainRate 以下进行编辑。如果我的 mainRate 是 990，而总预付款为 2990，当我编辑此总预付款时，我无法将其编辑为小于 990(mainRate)。我想我的逻辑可能有问题。

  <p>Total Advance</p>
  <input
    style={{ width: "4rem" }}
    type="text"
    value={
      Number(staydays) > 1
        ? roomno.length * mainAvanceRate +
          roomno.length * Number(mainRate) * Number(staydays - 1)
        : roomno.length * mainAvanceRate
    }
    name="mainAvanceRate"
    onChange={(e) => setmainAvanceRate(e.target.value / Number(roomno.length))}
  />;

我想编辑输入框。当停留天数为 1 时，它会被编辑，但当输入大于 1 时，它不会低于 mainRat。

Answer 1

React 提供了 2 种访问输入字段值的方法：使用受控或非受控输入技术。

受控输入应该如下所示。

const [value, setValue] = useState('');
<input
  value={value}
  name="mainAvanceRate"
  onChange={(e) => setValue(e.target.value)}
/>

否则，用户输入的值和显示的值可能会不同，造成混乱。

在您的情况下，您使用的是受控输入，但逻辑和数据输入是混合的。

逻辑和数据输入应该分开。

• 您可以使用输入验证来处理逻辑。
• 如果不可能，您可能需要为 mainAvanceRate 和totalAdvance 使用 2 个输入。