如何限制输入仅允许二进制数字？React代码问题求助

Let's break down what's going wrong with your current approach, then walk through a cleaner, more effective solution.

What's Off with Your Current Code? #

1. replace isn't modifying your string: The replace() method returns a new string instead of altering the original one. So when you do inputNumber.replace(number, ''), you're not saving the filtered result anywhere—your original inputNumber stays unchanged.
2. Inefficient loop logic: You're iterating through every character and calling bin2Dec multiple times (once for each valid character), which is unnecessary and can cause unexpected results.
3. Wrong input type: Using type="number" for binary input is problematic. This input allows characters like e (for scientific notation), negative signs, and decimals—none of which are valid binary digits. Worse, when you enter non-numeric characters, event.target.value becomes an empty string, making it impossible to filter properly.

Optimized Solution #

Step 1: Switch Input to Text Type

First, update your NumberInput component to use a text input. This gives you full control over the input content:

// NumberInput.js
import React from 'react';
const NumberInput = ({ inputChange }) => {
  return (
    <div>
      <input 
        id='input-number' 
        type='text' 
        onChange={inputChange}
        placeholder="Enter binary digits (0/1)"
      />
    </div>
  )
}
export default NumberInput;

Step 2: Simplify Input Filtering

Use a regular expression to filter out all non-binary characters in one go, then update your state and trigger the conversion. This is far cleaner than looping through each character:

// App.js - Updated onInputChange method
onInputChange = (event) => {
  // Filter out any character that's not 0 or 1
  const filteredBinary = event.target.value.replace(/[^01]/g, '');
  
  // Update state first, then run conversion in the setState callback
  this.setState({ inputString: filteredBinary }, () => {
    this.bin2Dec(filteredBinary);
  });
}

Step 3: Refine the Binary-to-Decimal Conversion

Fix your bin2Dec function to handle empty input correctly and properly update the component state:

// App.js - Updated bin2Dec method
bin2Dec = (bin) => {
  // If input is empty, set decimal to 0
  if (!bin) {
    this.setState({ decimal: 0 });
    return;
  }

  let decimal = 0;
  for (let index = bin.length - 1; index >= 0; index--) {
    decimal += parseInt(bin[index]) * Math.pow(2, bin.length - 1 - index);
  }
  
  this.setState({ decimal });
}

Step 4: Update the Render Output

Make sure your Output component displays the converted decimal value (adjust the component to accept a decimal prop if needed):

// App.js - Updated render method
render() {
  const { decimal, inputString } = this.state;
  return (
    <Fragment>
      <h1>Binary to Decimal Converter</h1>
      <NumberInput inputChange={this.onInputChange} />
      {/* Optional: Keep the submit button for manual conversion if desired */}
      <button onClick={() => this.bin2Dec(this.state.inputString)}>Convert</button>
      <Output decimal={decimal} />
    </Fragment>
  );
}

Why This Works Better #

• Regex filtering: The [^01] pattern matches any character that's not 0 or 1, and the g flag ensures we replace all instances in one pass—no loops required.
• Text input control: Using type="text" eliminates the quirks of number inputs, letting you handle exactly what the user types.
• State consistency: By calling bin2Dec in the setState callback, we ensure we're always using the latest filtered input value for conversion.

If you want to add extra polish, you could also add input validation feedback (like highlighting invalid characters as they're typed), but the above solution will solve your core problem of restricting input to binary digits and correctly converting to decimal.

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