React货币兑换应用：仅用原生JS实现输入数字后启用提交按钮

Absolutely! You don't need jQuery at all for this—plain vanilla JavaScript works perfectly, and it's actually more lightweight. Let's walk through how to implement this, plus I'll also share a React-specific approach since you're building a React app (it's cleaner than manipulating the DOM directly in React).

Pure Vanilla JavaScript Solution #

First, we'll grab references to the input field and the START button, then add an event listener to the input to check its value on every change.

// Grab the elements we need
const amountInput = document.getElementById('amountInput');
const startButton = document.querySelector('button[disabled]'); // Target the disabled START button

// Function to toggle the button's disabled state
function toggleStartButton() {
  // Check if the input has a valid number (not empty, is numeric, and positive)
  const hasValidAmount = amountInput.value.trim() !== '' && !isNaN(amountInput.value) && parseFloat(amountInput.value) > 0;
  
  // Update the button's disabled property
  startButton.disabled = !hasValidAmount;
}

// Listen for input changes (triggers on every keystroke/paste)
amountInput.addEventListener('input', toggleStartButton);

// Run once on page load to ensure initial state is correct
toggleStartButton();

Key Details: #

• We use getElementById to directly access the input field, and querySelector to target the START button (since it's the only disabled button initially).
• The toggleStartButton function validates the input: it ignores whitespace with trim(), checks for numeric values with isNaN(), and ensures the amount is positive (since you can't exchange 0 or negative currency).
• The input event listener fires immediately whenever the user edits the input (typing, pasting, etc.), which is more responsive than a change event (only triggers when the input loses focus).
• Calling toggleStartButton() on page load ensures the button stays disabled if the input is empty initially.

React-Friendly Solution (Recommended for Your App) #

Since you're building a React app, it's better to manage this with React state instead of manipulating the DOM directly. Here's how you'd implement this in a functional component:

import { useState } from 'react';

function ExchangeApp() {
  // State to track the input amount
  const [amount, setAmount] = useState('');

  // Derive whether the button should be disabled from state
  const isStartDisabled = amount.trim() === '' || isNaN(amount) || parseFloat(amount) <= 0;

  return (
    <div id='mainHomeDiv'>
      <h1>Exchange</h1>
      <label>From :</label>
      <select>
        <option value=''>type</option>
        <option value='Dollar'>Dollar</option>
        <option value='Euro'>Euro</option>
        <option value='NIS'>NIS</option>
      </select>
      <input
        type='number'
        id='amountInput'
        placeholder='Amount'
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
      <br /> <br />
      <label>To :</label>
      <select>
        <option value=''>type</option>
        <option value='Dollar'>Dollar</option>
        <option value='Euro'>Euro</option>
        <option value='NIS'>NIS</option>
      </select>
      <br /> <br />
      <button disabled={isStartDisabled}>START</button>
      <br /> <br />
      <button>Update</button>
      <button>Share on facebook</button>
      <button>View your exchange list</button>
    </div>
  );
}

export default ExchangeApp;

Why This is Better for React: #

• We use React's useState hook to track the input value, keeping the UI and state in sync automatically.
• The isStartDisabled variable is derived directly from the state—no manual DOM manipulation needed. React re-renders the button with the correct disabled value whenever the amount changes.
• This follows React's unidirectional data flow principle, making your code more maintainable and easier to debug.

内容的提问来源于stack exchange，提问作者Oded