1
votes

Comment autoriser uniquement les chiffres binaires en entrée

J'ai ce code ici et je veux que l'entrée n'autorise que 1-0. J'ai essayé d'utiliser la méthode replace sur la chaîne even.target.value pour effacer tous les autres chiffres mais cela n'a pas fonctionné, y a-t-il un autre moyen de le faire mieux? ou suis-je dans le bon sens pour résoudre ce problème?

App.js:

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

export default NumberInput;

NumberInput.js: import React de 'react';

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;

reactjs replace

1 commentaires

Voici un bac à sable que j'ai créé pour vous codesandbox.io/s/unruffled-glade-3t9ov

3 Réponses :

1
votes

Vous pouvez également le faire avec html: 2. Vous pouvez afficher une erreur pour les nombres hors plage (tout sauf 0 et 1) comme ceci:

1 commentaires

la validation HTML5 peut être contournée lors de l'utilisation du framework javascript, nous avons plusieurs options pour empêcher cela de se produire

0
votes

Voici votre réponse en espérant que cela vous aidera. J'ai ajouté une logique pour supprimer les zéros non significatifs et il affiche également la sortie lorsque les valeurs sont modifiées.

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>
  );
}

0 commentaires

0
votes

Je créerais une validation sur onKeyDown .

Quelque chose comme ceci:

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>
    );
  }
}

Voici cet exemple JSFiddle

0 commentaires