Как разрешить ввод только двоичных цифр

Question

Я получил этот код здесь, и я хочу, чтобы ввод позволял только 1-0 в нем. Я пытался использовать метод замены в строке even.target.value, чтобы стереть все остальные цифры, но не сработал, есть ли другой способ сделать это лучше? или я правильно решаю эту проблему?

Приложение. js:

import React, { Component, Fragment } from 'react';
import Output from './Components/Output';
import NumberInput from './Components/NumberInput';
import './App.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
      decimal: 0,
      inputString: ''
    }
  }

  onInputChange = (event) => {
    let inputNumber = event.target.value;
    let stringLength = inputNumber.length;
    let history;
    for (let number of inputNumber) {
      if (number !== '1' && number !== '0') {
      inputNumber.replace(number, '');
    } else {
      this.bin2Dec(inputNumber);
    }
   }
  }

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

  render() {
    const { decimal, inputString } = this.state;
    return (
      <Fragment>
      <h1>Binary to Decimal convertor</h1>
      <NumberInput inputChange={this.onInputChange} />
      <button>Submit</button>
      <Output string={inputString}/>
      </Fragment>
      );
  }
}

export default App;

NumberInput. js: импорт React из'act ';

const NumberInput = ({ inputChange }) => {
    return (
            <div>
            <input
             id='input-number'
             type='number' 
             onChange={inputChange}></input>
            </div>
        )
}

export default NumberInput;

Answer 1

Вот ваш ответ, надеюсь, это поможет. Я добавил logi c для удаления ведущих нулей, а также показывает вывод при изменении значений.

import React from "react";
import "./styles.css";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState("");
  const change = event => {
    let string = event.target.value;
    if (string.match("^[01]+$")) {
      setValue(string.replace(/^0+/, ""));
    } else {
      setValue(string.slice(0, -1));
    }
  };
  console.log(value);
  return (
    <div className="App">
      <label>input</label>
      <input type="text" name="something" onChange={change} value={value} />
      <br />
      <label>Output:{value !== "" ? parseInt(value, 2) : ""}</label>
    </div>
  );
}

Answer 2

Я бы создал проверку на onKeyDown .

Примерно так:

const NumberInput = ({ value, inputChange, handleKeyDown }) => {
  return (
    <div>
      <input
        value={value}
        id='input-number'
        type='number' 
        onChange={inputChange}
        onKeyDown={handleKeyDown}
        />
    </div>
  )
}

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      inputString: ''
    }
  }

  handleKeyDown = e => {
    // Gets the keyCode
    const keyCode = e.keyCode || e.which

    // key code 48 = 0
    // key code 49 = 1
    if (keyCode !== 48 && keyCode !== 49) {
        // If not 0 or 1, prevent to continue
      e.preventDefault()
    }
  }

  onInputChange = (event) => {
    const inputString = event.target.value;
        // Do your logic here
    this.setState({ inputString })
  }

  render() {
    const { inputString } = this.state;
    return (
      <React.Fragment>
        <h1>Binary to Decimal convertor</h1>
        <NumberInput
          value={inputString}
          inputChange={this.onInputChange}
          handleKeyDown={this.handleKeyDown}
         />
        <button>Submit</button>
      </React.Fragment>
    );
  }
}

Здесь это пример JSFiddle

Answer 3

Вы также можете сделать это с помощью html: 2. Вы можете отобразить ошибку для номеров вне диапазона (все, кроме 0 и 1), например:

<input inputmode="numeric" pattern="[0-1]*">