如何以反應形式使用1個輸入更新2個值

我有一個與幾個欄位反應的表格。其中 2 個應該連接...如果您輸入 1，另一個應該相應更新，但我無法掌握它。無論我嘗試什么，handleChange 只更新 1...

    const [form, setForm] = useState({
    name: "",
    nameEng: "",
    type: "",
    priceKN: "",
    priceEUR: "",
  });

  const handleChange = (event) => {
    setForm({ ...form, [event.target.name]: event.target.value });
  };

...
      <input
        type="number"
        name="priceKN"
        value={form.priceKN}
        onChange={handleChange}
      ></input>
      <input
        type="number"
        name="priceEUR"
        value={form.priceEUR}
        onChange={handleChange}
      ></input>

因此，當您輸入例如第一個值時，應計算第二個值 (priceKN / 7.54)，反之亦然，并顯示在表格中，但它不起作用。任何幫助，將不勝感激

uj5u.com熱心網友回復：

創建一個決議輸入的函式（getValues在示例中），并創建一個可以在當前表單值上傳播的物件：

const { useState } = React;

const getValues = ({ name, value, valueAsNumber }) => {
  switch(name) {
    case 'priceKN':
      return { 
        priceKN: valueAsNumber, 
        priceEUR: valueAsNumber * 0.13
      };
    case 'priceEUR':
      return { 
        priceKN: valueAsNumber *  7.53, 
        priceEUR: valueAsNumber
      };
    default:
      return { [name]: value };
  }
}

const Demo = () => {    
  const [form, setForm] = useState({
    name: "",
    nameEng: "",
    type: "",
    priceKN: 0,
    priceEUR: 0,
  });

  const handleChange = event => {
    setForm(values => ({ 
      ...values, 
      ...getValues(event.target)
    }));
  };

  return (
    <div>
      <input
        type="number"
        name="priceKN"
        value={form.priceKN}
        onChange={handleChange}
      ></input>
      <input
        type="number"
        name="priceEUR"
        value={form.priceEUR}
        onChange={handleChange}
      ></input>
    </div>
  );
}

ReactDOM
  .createRoot(root)
  .render(<Demo />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

和相同的想法useReducer-dispatch函式接受事件物件，reducer 解構事件的目標物件，并創建新狀態：

const { useReducer } = React;

const reducer = (
  state, 
  { target: { name, value, valueAsNumber } } 
) => {
  switch(name) {
    case 'priceKN':
      return {
        ...state,
        priceKN: valueAsNumber, 
        priceEUR: valueAsNumber * 0.13
      };
    case 'priceEUR':
      return { 
        ...state,
        priceKN: valueAsNumber *  7.53, 
        priceEUR: valueAsNumber
      };
    default:
      return { ...state, [name]: value };
  }
}

const initialValue = {
  name: "",
  nameEng: "",
  type: "",
  priceKN: 0,
  priceEUR: 0,
};

const Demo = () => {    
  const [form, dispatch] = useReducer(reducer, initialValue);

  return (
    <div>
      <input
        type="number"
        name="priceKN"
        value={form.priceKN}
        onChange={dispatch}
      ></input>
      <input
        type="number"
        name="priceEUR"
        value={form.priceEUR}
        onChange={dispatch}
      ></input>
    </div>
  );
}

ReactDOM
  .createRoot(root)
  .render(<Demo />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

uj5u.com熱心網友回復：

Parego，這是因為您以動態方式更新欄位。你需要這樣做：

  const [form, setForm] = useState({
    name: "",
    nameEng: "",
    type: "",
    priceKN: "",
    priceEUR: "",
  });
  const specials = ['priceKN',]

  const handleChange = (event) => {
    if(event.target.name == 'priceKN' || event.target.name == 'priceEUR')
        setForm({ ...form, priceKN: event.target.value,priceEUR: event.target.value});
    else
        setForm({ ...form, [event.target.name]: event.target.value });
  };

...
      <input
        type="number"
        name="priceKN"
        value={form.priceKN}
        onChange={handleChange}
      ></input>
      <input
        type="number"
        name="priceEUR"
        value={form.priceEUR}
        onChange={handleChange}
      ></input>

標籤：反应形式反应钩子

上一篇：使用ThymLeaf創建多個文本輸入框

下一篇：表單提交按鈕沒有切換，對js代碼沒有反應