Tengo una tabla que contiene, por ejemplo, 10 filas, cada fila tiene un componente de selección.

¿Cómo puedo almacenar todos los elementos seleccionados de las 10 filas en una matriz en estado para que sea así [{"cid":11,"id":2},{"cid":11,"id":3}]?

Lo hice aquí https://codesandbox.io/s/amazing-shannon-sewln pero con un pequeño problema ... cuando selecciono una opción, siempre se agrega a la matriz, incluso si la misma fila tiene una opción previa ...

Necesito la nueva opción para la misma fila para sobrepasar la opción anterior para no agregar un nuevo registro

-1
Shady Hakim 1 abr. 2020 a las 20:22

2 respuestas

La mejor respuesta

Actualiza onSelectGrade, crea una matriz de elementos con id y valor. En el cambio, verifique si existe el mismo elemento (es decir, seleccionado antes), luego actualice o cree uno nuevo (presione en la matriz).

Muestra de trabajo de pago: https://codesandbox.io/s/billowing-feather-cl0by

onSelectGrade(e) {
    console.log(e.target.id);
    const selectedGrades = [...this.state.selectedGrades];
    const grade = selectedGrades.find(x => x.id === e.target.id);
    if (grade) grade.value = e.target.value;
    else selectedGrades.push({ id: e.target.id, value: e.target.value });
    this.setState(
      {
        selectedGrades
      },
      () => {
        console.log(this.state);
      }
    );
  }
1
xdeepakv 1 abr. 2020 a las 17:41

Debe usar {} como su valor de estado y luego formatearlo al formato requerido (es decir, matriz)

https://codesandbox.io/s/gifted-hopper-ov10z

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedGrades: {}
    };
    this.onSelectGrade = this.onSelectGrade.bind(this);
  }
  onSelectGrade(e) {
    console.log(e.target);
    this.setState(
      {
        selectedGrades: {
          ...this.state.selectedGrades,
          [e.target.id]: e.target.value
        }
      },
      () => {
        console.log(this.state);
      }
    );
  }

  getOuput = () => {
    return Object.keys(this.state.selectedGrades).map(key => {
      console.log(key);
      return { id: key, cid: this.state.selectedGrades[key]};
    });
  };

  render() {
    console.log("required output", this.getOuput());
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <table>
          <tr>
            <th>Country</th>
          </tr>
          <tr>
            <td>
              <select
                defaultValue="Default"
                id="22"
                onChange={this.onSelectGrade}
              >
                <option disabled value="Default">
                  Choose grade
                </option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">c</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <select
                defaultValue="Default"
                id="23"
                onChange={this.onSelectGrade}
              >
                <option disabled value="Default">
                  Choose grade
                </option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">c</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <select
                defaultValue="Default"
                id="24"
                onChange={this.onSelectGrade}
              >
                <option disabled value="Default">
                  Choose grade
                </option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">c</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <select
                defaultValue="Default"
                id="25"
                onChange={this.onSelectGrade}
              >
                <option disabled value="Default">
                  Choose grade
                </option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">c</option>
              </select>
            </td>
          </tr>
        </table>
      </div>
    );
  }
}
0
Zohaib Ijaz 1 abr. 2020 a las 17:53