Mehrere Parameter übergeben, um event-Handler Reagieren

So, ich bin versucht, zu reagieren, arbeiten mit ES6-syntax. In ES5 ich hatte setInitialState ohne einen Konstruktor, arbeitete mit der Funktion verbindliche syntax. Ich habe eine Liste der Preise, die ist willkürlich und ich will den Zustand ändern, wenn das input-element geändert wird. Aber der richtige Preis muss geändert werden.

Ich bin mir auch nicht ganz sicher, das ist der richtige Weg, es zu tun. Kann mir bitte jemand sagen, den letzten Weg dieses sollte getan werden?

Hier ist mein code:

import React, {Component} from 'react'
import 'bootstrap/dist/css/bootstrap.css';

export default class PriceTable extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      pid: this.props.pid || "12345",
      name: this.props.name || "name",
      prices: this.props.prices || [
        {count: 1, desc: 'one', price: 8.25},
        {count: 6, desc: 'six', price: 7.60},
        {count: 12, desc: 'twelve', price: 6.953}
      ]
    };

    this.setPid = this.setPid.bind(this);
    this.setName = this.setName.bind(this);
    this.setCount = this.setCount.bind(this, i);
    this.setDesc = this.setDesc.bind(this, i);
    this.setPrice = this.setPrice.bind(this, i);
    this.logDebug = this.logDebug.bind(this);
  }

  setPid(e) {
    this.setState({pid: e.target.value})
  }

  setName(e) {
    this.setState({name: e.target.value})
  }

  setCount(i, e) {
    var newPrices = this.state.prices
    newPrices[i].count = e.target.value
    this.setState({prices: newPrices})
  }

  setDesc(i, e) {
    var newPrices = this.state.prices
    newPrices[i].sec = e.target.value
    this.setState({prices: newPrices})
  }

  setPrice(i, e) {
    var newPrices = this.state.prices
    newPrices[i].price = e.target.value
    this.setState({prices: newPrices})
  }

  _renderPriceRow(price, i) {
    return (
      <tr key={i}>
        <td >
          <input type="text" className="form-control" defaultValue={price.count} onChange={this.setCount(this, i).bind(this, i)}/>
        </td>
        <td >
          <input type="text" className="form-control" defaultValue={price.desc} onChange={this.setDesc(this, i).bind(this, i)}/>
        </td>
        <td >
          <input type="text" className="form-control" defaultValue={price.price} onChange={this.setPrice(this, i).bind(this, i)}/>
        </td>
      </tr>
    );
  }

  render() {
    return (
      <div className="row">
       ...
      </div>
    );
  }
}

- Und das ist der Fehler...

PriceTable.jsx:21 Uncaught ReferenceError: i is not defined
    at new PriceTable (PriceTable.jsx:21)

InformationsquelleAutor Dennis Ich | 2017-04-01

reactjs twitter-bootstrap-3

Sie verbindlich sind die Funktionen falsch

Im Konstruktor müssen Sie nicht das argument, Sie brauchen nur binden Sie es wie this.setDesc = this.setDesc.bind(this);

Auch In Ihrem onChange, wenn Sie wollen, übergeben Sie Parameter an die Funktion geben Sie es mit binden und nicht als Argumente übergeben, und binden Sie diese erneut .

onChange={this.setDesc.bind(this, i)}

Sie gesamte code sieht wie

import React, {Component} from 'react'
import 'bootstrap/dist/css/bootstrap.css';

export default class PriceTable extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      pid: this.props.pid || "12345",
      name: this.props.name || "name",
      prices: this.props.prices || [
        {count: 1, desc: 'one', price: 8.25},
        {count: 6, desc: 'six', price: 7.60},
        {count: 12, desc: 'twelve', price: 6.953}
      ]
    };

    this.setPid = this.setPid.bind(this);
    this.setName = this.setName.bind(this);
    this.setCount = this.setCount.bind(this);
    this.setDesc = this.setDesc.bind(this);
    this.setPrice = this.setPrice.bind(this);
    this.logDebug = this.logDebug.bind(this);
    this._renderPriceRow = this._renderPriceRow.bind(this);
  }

  setPid(e) {
    this.setState({pid: e.target.value})
  }

  setName(e) {
    this.setState({name: e.target.value})
  }

  setCount(i, e) {
    var newPrices = this.state.prices
    newPrices[i].count = e.target.value
    this.setState({prices: newPrices})
  }

  setDesc(i, e) {
    var newPrices = this.state.prices
    newPrices[i].sec = e.target.value
    this.setState({prices: newPrices})
  }

  setPrice(i, e) {
    var newPrices = this.state.prices
    newPrices[i].price = e.target.value
    this.setState({prices: newPrices})
  }

  _renderPriceRow(price, i) {
    return (
      <tr key={i}>
        <td >
          <input type="text" className="form-control" defaultValue={price.count} onChange={this.setCount.bind(this, i)}/>
        </td>
        <td >
          <input type="text" className="form-control" defaultValue={price.desc} onChange={this.setDesc.bind(this, i)}/>
        </td>
        <td >
          <input type="text" className="form-control" defaultValue={price.price} onChange={this.setPrice.bind(this, i)}/>
        </td>
      </tr>
    );
  }

  render() {
    return (
      <div className="row">
       ...
      </div>
    );
  }
}

Sie könnten auch Gebrauch machen von Pfeil-Funktionen zum übergeben von Parametern wie

onChange={(e) => this.setDesc(e,  i)}

Das hat eigentlich den gleichen Effekt wie der unverbindlich die Funktion überhaupt. Ich bekomme die folgende Fehlermeldung: Uncaught TypeError: Cannot read property 'setCount' of undefined at _renderPriceRow
Das ist, weil Sie noch nicht binden, die renderPriceRow Funktion. Überprüfen Sie das update
Können Sie bitte kurz erklären, warum ich zu binden, die Funktion auch? Ist es, da die Funktion außerhalb des Bereichs der eigentlichen Klasse? Das scheint eine ziemliche Menge an boilerplate-code hier. Warum ist es nicht gebunden wie in ES5 vor?
Sie müssen binden, die Funktion zu, weil es verwendet this als Referenz zu nennen, die setCount Funktion und wo this in der Funktion bezieht sich auf den Kontext der Funktion selbst, wenn Sie nicht binden Sie es. viel wie Bindung, welche anderen Funktionen verwenden setState

InformationsquelleAutor Shubham Khatri

2

Verwenden Sie die onChange Methode wie diese:
```
onChange={this.setCount.bind(this, i)}
onChange={this.setDesc.bind(this, i)}
onChange={this.setPrice.bind(this, i)}
```
Entfernen Sie diese Zeilen aus constructor:
```
this.setCount = this.setCount.bind(this, i);
this.setDesc = this.setDesc.bind(this, i);
this.setPrice = this.setPrice.bind(this, i);
```
Können wir bind die function im constructor, wo keine zusätzlichen parameter erforderlich ist, wie diese functions in Ihrem Fall:
```
this.setPid = this.setPid.bind(this);
this.setName = this.setName.bind(this);
this.logDebug = this.logDebug.bind(this);
```
Aber wenn in jedem function Sie möchten, übergeben Sie einen zusätzlichen parameter, dann müssen Sie entweder arrow function oder bind dass function mithilfe .bind(this, parameter).

Hinweis:

Etwas anderes, was Sie ändern müssen, hier ist der Weg, den Sie aktualisieren die state Werte, sollten Sie niemals mutieren state variable direkt. Bei der Zuordnung eines array zu jeder variable, die variable wird an die Referenz, die array, bedeutet auch immer änderungen, die Sie tun, um diese variable auf den ursprünglichen array.

So dass Sie brauchen, um eine Kopie dieser variable und führen Sie dann die änderungen auf und verwenden Sie setState zum aktualisieren der Werte.

Als pro DOC:

Nie mutieren diese.Stand direkt, als ruft setState() danach kann
ersetzen Sie die mutation, die Sie gemacht. Behandeln Sie dieses.Zustand, als wäre es
unveränderlich.
- Ok, werde ich tun, die Sachen kopieren. Eigentlich die Zeilen, die Sie vorschlagen, zu entfernen, wurden meine naive Ansatz weiter zu beheben, die vorherigen Fehler: Uncaught TypeError: Cannot read property 'setCount' of undefined at _renderPriceRow
- Nein, dass nicht die Art und Weise, was, die ich vorgeschlagen richtig funktioniert, bin ich sicher, wird eine funktionierende code 🙂
- becuas eyou nicht gebundenen _renderPriceRow Funktion.
- schreiben Sie diese Zeile in den Konstruktor: this._renderPriceRow = this._renderPriceRow.bind(this);
InformationsquelleAutor Mayank Shukla

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.