Question

我正在尝试根据另一个更改输入字段的值，反之亦然。

这是一个创建问题，任何更改的值都不会显示在输入中。输入的内容不会显示我输入的任何内容。

下面我尝试过，您可以看到我正在尝试根据2更改输入1的值，并根据first更改输入2的值：

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

const App = () => {
  
   useEffect(() => {
   
   //fetch api call here
   
   });

  const [firstVal, setFirstVal] = useState(0);
  const [secondVal, setSecondVal] = useState(0);
  
  const changeFirstValue = (e) => {
      setSecondVal(e.target.value / 2);
  }

  const changeSecondValue = (e) => {
      setFirstVal(e.target.value * 2);
  }

  return (
    <div>
      <input type='number' value={firstVal} onChange={changeFirstValue}></input>
      <input type='number' value={secondVal} onChange={changeSecondValue}></input>
    </div>
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

任何帮助将不胜感激。

Answer 1

如果要显示这两个元素之间的除法和乘法关系。尝试以下代码：

  const changeFirstValue = (e) => {
    setSecondVal(e.target.value);
    setFirstVal(e.target.value * 2);
  }

  const changeSecondValue = (e) => {
      setFirstVal(e.target.value);
      setSecondVal(e.target.value / 2);
  }

  return (
    <div>
      <input type='number' value={firstVal} onChange={changeSecondValue}></input>
      <input type='number' value={secondVal} onChange={changeFirstValue}></input>
    </div>
  );

Answer 2

据我了解，我认为您必须撤消对两个函数的调用，因此您的代码将如下所示：

...
 <input type='number' value={firstVal} onChange={changeSecondValue}></input>
 <input type='number' value={secondVal} onChange={changeFirstValue}></input>
...

React.JS-根据另一个输入更改输入

2 个答案: