vendredi 11 mars 2016

React submit form to process AJAX request from checkbox input

I'm building a react contact list component that lists contacts and their data. For one column I want checkboxes to allow the user to check off the contact he wishes to delete. For those that are checked off, the form should collect the corresponding contact's id and then pass it to an AJAX call to post those id's in a delete to the backend API. I'm stuck with what I have below and main problem is 1) building out form correctly to collect contact id's through checkboxes [how do I wrap the checkboxes in a form when they belong to different rows in a table?] and 2) passing those ids to a AJAX call [how do I retrieve the data from a submitted form?]

render: function () {
        var contacts = this.state.contacts.map(function (contact, idx) {
          return (
            <tr key={idx}>
              <td>{contact.firstName}</td>
              <td>{contact.lastName}</td>
              <td>{contact.city}</td>
              <td>{contact.phone}</td>
              <td>{contact.email}</td>
              <td><input type="checkbox" name="delete" value={contact.id}/></td>
            </tr>
          );
        });
        return(
          <div>
            <table>
              <thead>
                <tr>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>City</th>
                  <th>Phone Number</th>
                  <th>Email</th>
                  <th>Delete</th>
                </tr>
              </thead>
              <tbody>{contacts}</tbody>
            </table>
          </div>
        );
      }




Aucun commentaire:

Enregistrer un commentaire