Zahl mit dezimaler ein-in Reagieren?

Ich habe eine Reihe von input innerhalb Reagieren Komponente, und es muss akzeptieren, dass die Zahl mit einem Dezimalpunkt. In der Regel Einträge in der Bruchteile eines cents, wie 0.0073, dass Art der Sache.

<div className="form-group">
  <label htmlFor="rate" className="col-sm-6 control-label">Rate:</label>
  <div className="col-sm-2"> 
    <input type="number"
      title="Rate"
      id="rate"
      className="form-control"
      value={this.props.rate}
      min="0.00"
      step="0.001"
      max="1.00"
      onChange={()=>{
        console.log('page rate changed');
        this.props.setrate($('#rate').val());
      }} />
  </div>
</div>

Das Problem ist, dass mit jeden Tastendruck, es ist das zurücksetzen der Preis für die app, und dann setzen diesen Wert in die input. Also es geht so:

  • Benutzer-Typen 0, der Wert auf 0, und 0 angezeigt.
  • Benutzer-Typen ., 0. ist keine gültige Zahl, so wird die Eingabe gelöscht.

Kann jeder denken, oder einen workaround? Ich weiß, ich könnte einfach ein normaler Eingang, aber type="number" führt zu einige nette Sachen in verschiedenen Browsern.

InformationsquelleAutor fnsjdnfksjdb | 2016-01-15
  1. 0

    Ich habe versucht den code und war nicht wirklich betroffen von Ihrem Problem, der Wert ist in der Tat leer, wenn Sie geben Sie den letzten Punkt, die Eingabe wird aber nicht zurückgesetzt.

    Dem was ich verändert von Ihrer Umsetzung ist, dass ich den input-Wert aus der onChange Veranstaltung eher als jQuery verwenden.

    <input onChange={e => this.props.setrate(e.target.value)} />

    Aber ich bezweifle, dass dein Problem kommt aus, dass, obwohl.

    Was Sie tun können, ist nicht zu nennen, Ihre setrate Funktion, wenn Sie erkennen, dass eine Ende Punkt in Ihrem string. Ihr Zustand wird nicht geändert werden, bis der Benutzer eine gültige Zahl, so dass ein Tastendruck nach der 0..

    <input onChange={e => {
  const str = e.target.value
  if (str.charAt(str.length - 1) === '.') { return }
  this.props.setrate(str)
}} />
    • Ich denke mein Problem könnte sein, dass ich mit value statt defaultValue. Vielen Dank für zeigt mir, wie man dies tun kann, ohne jQuery, aber - es ist eine Art Krücke, die ich versuche, um loszuwerden, mit Reagieren.
    • Ich habe dieses unten wie kann ich trotzdem erstellen das problem selber. Einstellung defaultValue hält das problem Auftritt aber es nicht geben Ihnen die schön formatierte Wert, den ein Benutzer machen erwarten.
    • Mit redux, die defaultValue-sollte bereits festgelegt werden, in Ihrem reducer sowieso. Viel Glück beim Kampf 😉
    InformationsquelleAutor Balthazar
  2. 2

    Können Sie so etwas tun

    const floatRegExp = new RegExp('^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)$')

const handleValidationOnChange = (e, v, onChange) => {
  const { value } = v
  if (value === '' || floatRegExp.test(value)) {
    onChange(e, v)
  }
}

const InputFloat = props => {
  if (typeof props.onChange !== 'function') {
    return <Form.Input { ...props } />
  }

  const { onChange, ...parentProps } = props

  return <Form.Input
    { ...parentProps }
    onChange={(e, v) => handleValidationOnChange(e, v, onChange)}
  />
}

    Form.- Eingang können Sie jede Komponente, die einen Wert hat.

    Werden Sie haben, um Sie später zu überprüfen ", das ist unvermeidlich.

    InformationsquelleAutor David Polák
  3. 0
        <input
        type="text"
        value={this.props.rate}
        onChange={this.onAmountChange}
      />

    geben sollte text-und Eingabe-Wert definiert werden sollte, von regex.

    onAmountChange = e => {
    const amount = e.target.value;

    if (!amount || amount.match(/^\d{1,}(\.\d{0,4})?$/)) {
      this.setState(() => ({ amount }));
    }
  };

    regex bedeutet hier: mit einer Zahl beginnen, und fügen Sie so viele wie Sie möchten. dann Optional Ende Dezimalzahlen mit bis zu 4 Dezimalstellen.

    InformationsquelleAutor Yilmaz
  4. -1

    Hatte ich ein ähnliches Problem hatte wo ich dezimal zahlen in eine Datenbank und Lesen Sie in Reagieren. Standardmäßig wird die Dezimalzahl, die zeigen würde, mit nachgestellten Nullen, wenn die Anzeige Reagieren. Versucht, die Anzeige ohne das nachgestellte Nullen hat mir das Problem, das Sie oben beschreiben. Mein Problem ist möglicherweise etwas anders aus, was du suchst, aber ich denke, dass es anderen helfen würde. Was ich zu tun hatte:

    • Ziehen Sie die Daten aus der Datenbank mit der gewünschten Formatierung. Zum Beispiel: statt select mynumber from mytable ich habe select (TRIM(mynumber)+0) as mynumber from mytable. Dies entfernt automatisch die nachgestellte Nullen.
    • Las ich dann diese Werte in die Reagieren JS-Skript und setzen Sie in Stand. Diese werden die value von der input-Felder.

    • Dann, anstatt zu verhindern, dass Benutzer die Eingabe einer nicht-Zahl-Wert ich ändern Sie einfach die Hintergrundfarbe des Eingabefeldes auf rot auf, wenn der Wert keine Zahl ist.

      if (isNaN(mynumber)) {
      bgcolor = "#fdd" //Fügen Sie diese auf Ihre Eingabe Stil
      }

    • Fand ich den roten hintergrund oben gut genug für meine Zwecke, aber Sie können auch implementieren, eine zusätzliche überprüfung, wenn der Benutzer klickt auf die Schaltfläche "speichern".
    • Dies ist nicht im Zusammenhang zu REAGIEREN
    InformationsquelleAutor kojow7
Schreibe einen Kommentar