reagieren, Tabelle Zeile Spalte anzeigen auf die Schaltfläche klicken

Ich habe eine Tabelle gebaut, die dynamisch durch Zuordnung über ein array. Jedes Element im array wird eine Zeile. Eine der Spalten in jeder dieser Zeilen ist ein select. Ich will nur, dass die Spalte der Inhalt angezeigt wird, wenn ein button in der gleichen Zeile die nächste Spalte geklickt wird.

Mein plan war, fügen Sie eine Art Knebel bool-Eigenschaft für jedes Objekt in meinem array, aber wenn ich dann versuche zu schalten in meinen Schaltfläche onclick, meine eslint ist beschwert, weil ich versuche, ändern einer Eigenschaft des Parameters schickte ich in die Funktion, die aufgerufen wird, indem die onclick.

Was ist der geeignete Weg, dies zu tun?

Hier ist der code für die Tabelle:

<table>
  <tbody>
    {myArray.map(row => (
      <tr key={`test-${row.name}`}>
        <td>
          <div className="testClass">{row.id}</div>
        </td>
        <td>{row.name}</td>
        <td>
          <Select
            options={this.getOptions(row.id)}
            onSelect={this.onOptionSelect}
            placeholder="Select something"
          />
        </td>
        <td><button onClick={() => { changeStuff(row); }}>{ row.myToggle ? 'Save' : 'Change something' }</button></td>
      </tr>
    ))}
  </tbody>
</table>
  • Können Sie update genau die eslint Fehler?
  • können Sie uns einige code ? Sie müssen wahrscheinlich behandeln Sie das display der Säule durch ein Zustands-flag
  • jede Zeile müsste Staates zu tun, ein Zustands-flag, Nein? An diesem Punkt werden die Zeilen, die haben keinen Staat. Ich will nicht, um zu zeigen, das dropdown für ALLE Zeilen, wird nur die Zeile für die Sie die-Taste geklickt wird.
  • um die Eigenschaft der Funktion parameter 'die Zeile'. (Nein-param-reaassign)"
  • habe etwas code zu zeigen, ungefähr so wie meine Tabelle aussieht.
  • Ich habe geschrieben Antwort. Werfen Sie einen Blick!

InformationsquelleAutor Ben Walker | 2017-08-23
  1. 2

    In click-handler, können Sie Ihr array insgesamt zum ein - /ausblenden die option wählen.

    Basiert auf meinem Verständnis, ich habe versucht, die Sie weiter unten erstellen snippet. Dies ist der Weg, den ich kommen könnte, nach meinem Verständnis. Ich habe gewartet "versteckt" - Feld in das array von Objekten. Anstelle von "Wählen Sie" ich haben eine einfache Schaltfläche. Sie können sich entsprechend ändern. Hoffe, das hilft.

    JS:

    const list = [
  {
    name: "Person 1",
    phone: "123-4567",
    id: 11,
    hidden:true
  },
  {
    name: "Person 2",
    phone: "123-4567",
    id: 12,
    hidden:true
  },
  {
    name: "Person 3",
    phone: "123-4567",
    id: 23,
    hidden:true
  },
  {
    name: "Person 4",
    phone: "123-4567",
    id: 34,
    hidden:true
  },
  {
    name: "Person 5",
    phone: "123-4567",
    id: 45,
    hidden:true
  }
];

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

    this.state = {
      list: list
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(item) {
    let updatedList = this.state.list.map(obj => {
       if(obj.id === item.id) {
         return Object.assign({}, obj, {
            hidden:!item.hidden
         });
       }
       return obj;
    });
    this.setState({
      list : updatedList
    });
  }

  render() {
    return (
      <div>
        <table>
          <tbody>
            {this.state.list.map(item =>
              <tr key={item.itemId}>
                <td>
                  {item.name}
                </td>
                <td>
                  {item.phone}
                </td>
                <td >
                  <button hidden={item.hidden}> Action </button>
                </td>
                <td>
                  <button
                    className="delete"
                    onClick={() => this.handleClick(item)}
                  >
                    Change
                  </button>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

    CSS:

    table td {
     font-size: 14px;
     font-weight: normal;
     padding: 10px;
     border: 1px solid #eee;
 }

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

    • hat dieses Problem gelöst, Ihr Ziel?
    • arbeite noch an der Umsetzung. So weit, es sieht gut aus. Möchte nur sicherstellen, dass ich habe es, alle arbeiten vor der Annahme als Antwort.
    InformationsquelleAutor Dev
Schreibe einen Kommentar