根据计算 ReactJs 更新输入字段

发布于07月30日

我有两个输入字段，允许用户输入任意一个输入来执行米到公里的转换.我试图使用useEffect来观察更改并更新任何一个输入字段，但它不能正常工作.

import React, { useState, useEffect } from "react";
import './App.css';

function App() {
  const [value, setValue] = useState('');
  const [value2, setValue2] = useState('');
  useEffect(() => {
    let res = parseInt(event.target.value) * 1000;
    setValue2(res.toString());
  }, [value])
  useEffect(() => {
    let res = parseInt(event.target.value) / 1000;
    setValue(res.toString());
  }, [value2])
  const onChange = (event) => {
    setValue(event.target.value);
  };
  const onChange2 = (event) => {
    setValue2(event.target.value);
  };
  return (
    <>
      <div>Meters</div>
      <input value={value} onChange={onChange} />
      <div>Kilometers</div>
      <input value={value2} onChange={onChange2} />
    </>
  );
}

export default App;

推荐答案

你不需要useEffect英镑就能实现你想要的:

import React, { useState } from "react";

function App() {
  const [value, setValue] = useState(null);
  const [value2, setValue2] = useState(null);

  const onChange = (event) => {
    setValue(event.target.value);
    setValue2(event.target.value / 1000);
  };
  const onChange2 = (event) => {
    setValue2(event.target.value);
    setValue(event.target.value * 1000);

  };

  return (
    <>
      <div>Meters</div>
      <input value={value} onChange={onChange} />
      <div>Kilometers</div>
      <input value={value2} onChange={onChange2} />
    </>
  );
}

export default App;

Sandbox 示例here