我有一个 jsx 按钮，应该将数据从一个 React 组件“翻转”到由于某种原因无法工作的另一个（兄弟）组件

Question

我正在 React 中构建一个货币转换器。我有两个下拉菜单，都包含一系列货币，供用户选择要转换的货币。

我添加了一个“翻转”按钮，我想从两个下拉列表中交换当前选择的货币，但我无法让它工作。

这是父组件：

function App() {
  const [fromCurrency, setFromCurrency] = useState("USD");
  const [toCurrency, setToCurrency] = useState("EUR");
  const [amount, setAmount] = useState('');
  const [result, setResult] = useState(0);
  const [flip, setFlip] = useState(false);
  const [loading, setLoading] = useState(false);

  const currencyList = ["USD", "EUR", "GBP", "CAD", "MXN", "COP"];

  const handleFromCurrencyChange = (event) => {
    console.log("From currency changed to:", event.target.value);

    setFromCurrency(event.target.value);
  };

  const handleToCurrencyChange = (event) => {
    console.log("To currency changed to:", event.target.value);

    setToCurrency(event.target.value);
  };

  const handleAmountChange = (event) => {
    setAmount(event.target.value);
  };

  const handleFlip = () => {
   const currentFromCurrency = fromCurrency;
    const currentToCurrency = toCurrency;

    setFromCurrency(currentToCurrency);
    setToCurrency(currentFromCurrency);
    
    console.log("Flip");

  };

  
  return (
    <div className="wrapper flex flex-col items-center px-4 py-8">
    <div className="wrapper flex flex-col items-center px-4 py-8">
  <Header />

  <CurrencySelector
    currencyList={currencyList}
    fromCurrency={fromCurrency}
    toCurrency={toCurrency}
    handleFromCurrencyChange={handleFromCurrencyChange}
    handleToCurrencyChange={handleToCurrencyChange}
  />
  <HiOutlineSwitchHorizontal className="text-2xl text-blue-500 cursor-pointer mx-4 "
  onClick = {handleFlip}
   />

  <Input handleAmountChange={handleAmountChange} amount={amount} 
  
  />



  <ConvertButton className="bg-blue-500 text-white px-4 py-2 rounded-md mb-4" />
  <Result className="text-2xl font-bold" />
</div>
    </div>
  );
}

这是货币选择器

const CurrencySelector = ({
  currencyList,
  fromCurrency,
  toCurrency,
  handleFromCurrencyChange,
  handleToCurrencyChange,
}) => {
  return (
    <div className="flex items-center justify-center mb-6">
      <FromCurrency
        currencyList={currencyList}
        onChange={handleFromCurrencyChange}
        className="mr-2"
        value={fromCurrency}
      />
      <ExchangeLogo />
      <ToCurrency
        currencyList={currencyList}
        onChange={handleToCurrencyChange}
        className="ml-2"
        value={toCurrency}
      />
    </div>
  );
};



const FromCurrency = ({ currencyList, onChange, className, value }) => {
  return (
    <select
      onChange={onChange}
      className={`border border-gray-300 rounded-lg shadow-sm px-4 py-3 w-32 focus:outline-none focus:ring-2 focus:ring-blue-300 mb-4 ${className}`}
    >
      {currencyList.map((currency) => (
        <option key={currency} value={currency}>
          {currency}
        </option>
      ))}
    
    </select>
  );
};

const ToCurrency = ({ currencyList, onChange, className, value }) => {
  return (
    <select
      onChange={onChange}
      className={`border border-gray-300 rounded-lg shadow-sm px-4 py-3 w-32 focus:outline-none focus:ring-2 focus:ring-blue-300 mb-4 ${className}`}
    >
      {currencyList.map((currency) => (
        <option key={currency} value={currency}>
          {currency}
        </option>
      ))}
    </select>
  );
};

我在每个货币下拉列表和翻转按钮本身上都包含了控制台日志。他们确认每个组件在被选中时都会正确地将其状态呈现到控制台。但我的“处理翻转”功能实际上并没有翻转所选货币。我认为问题出在“手柄翻转”事件处理程序或下拉组件中的逻辑上。我通过 GPT 4 运行了这个，但无法在那里收到明确的解决方案。

Answer 1

代码需要设置

value

元素的

<select>

属性，现在传递到

value

组件的

XCurrency

属性将被忽略：

const FromCurrency = ({ currencyList, onChange, className, value }) => {
  return (
    <select
      onChange={onChange}
      className={/* ... */}
      {/* ADD `value` prop! */}
      value={value}
    >
      {/* ... */}
    </select>
  );
};

const ToCurrency = ({ currencyList, onChange, className, value }) => {
  return (
    <select
      onChange={onChange}
      className={/* ... */}
      {/* ADD `value` prop! */}
      value={value}
    >
      {/* ... */}
    </select>
  );
};