Skip to main content
se añadieron 2555 caracteres en el cuerpo
Origen Enlace
Alex
  • 103
  • 1
  • 2
  • 12

Actualización: Según la respuesta de Emeeus, logré lo que deseaba. Lo que quería hacer era algo así:

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      productos: [
        { id: "1", value: "Tennis", estado: false },
        { id: "2", value: "Camisa", estado: false },
        { id: "3", value: "Fajas", estado: false }
      ],
      producto: { id: "", value: "", estado: false }
    };

    this.handleDropdown = this.handleDropdown.bind(this);
    this.handleDropDownState = this.handleDropDownState.bind(this);
  }

  handleDropdown(event) {
    const objetoSeleccionado = event.target.value;

    if (!(objetoSeleccionado === null || objetoSeleccionado === undefined)) {
      const objeto = this.state[event.target.name].find(
        objeto => objeto.id === objetoSeleccionado
      );
      //La key producto está hardcodeada por mi
      this.setState(
        {
          producto: objeto
        },
        () => {
          console.log(this.state); //<-- este callback es solo para mostrar state
        }
      );
    }
  }

  handleDropDownState(event) {
    if (!(event.target.name === null || event.target.name === undefined)) {
      let producto = this.state.producto;
      producto.estado = event.target.checked;
      this.setState({ [event.target.name]: producto });

      this.setState({
        [this.state.productos.map(
          productoFinal => productoFinal.id === producto.id
        )]: [producto]
      });
      console.log(this.state);
    }
  }

  render() {
    return (
      <div>
        <select name="productos" onChange={e => this.handleDropdown(e)}>
          {this.state.productos.map((p, i) => {
            return (
              <option key={i} value={p.id}>
                {p.value}
              </option>
            );
          })}
        </select>
        <br />
        <label htmlFor="estadoProducto">
          <input
            type="checkbox"
            id="producto"
            name="producto"
            value={this.state.producto.estado}
            onChange={this.handleDropDownState}
          />
        </label>
      </div>
    );
  }
}

Gracias de antemano.

Gracias de antemano.

Actualización: Según la respuesta de Emeeus, logré lo que deseaba. Lo que quería hacer era algo así:

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      productos: [
        { id: "1", value: "Tennis", estado: false },
        { id: "2", value: "Camisa", estado: false },
        { id: "3", value: "Fajas", estado: false }
      ],
      producto: { id: "", value: "", estado: false }
    };

    this.handleDropdown = this.handleDropdown.bind(this);
    this.handleDropDownState = this.handleDropDownState.bind(this);
  }

  handleDropdown(event) {
    const objetoSeleccionado = event.target.value;

    if (!(objetoSeleccionado === null || objetoSeleccionado === undefined)) {
      const objeto = this.state[event.target.name].find(
        objeto => objeto.id === objetoSeleccionado
      );
      //La key producto está hardcodeada por mi
      this.setState(
        {
          producto: objeto
        },
        () => {
          console.log(this.state); //<-- este callback es solo para mostrar state
        }
      );
    }
  }

  handleDropDownState(event) {
    if (!(event.target.name === null || event.target.name === undefined)) {
      let producto = this.state.producto;
      producto.estado = event.target.checked;
      this.setState({ [event.target.name]: producto });

      this.setState({
        [this.state.productos.map(
          productoFinal => productoFinal.id === producto.id
        )]: [producto]
      });
      console.log(this.state);
    }
  }

  render() {
    return (
      <div>
        <select name="productos" onChange={e => this.handleDropdown(e)}>
          {this.state.productos.map((p, i) => {
            return (
              <option key={i} value={p.id}>
                {p.value}
              </option>
            );
          })}
        </select>
        <br />
        <label htmlFor="estadoProducto">
          <input
            type="checkbox"
            id="producto"
            name="producto"
            value={this.state.producto.estado}
            onChange={this.handleDropDownState}
          />
        </label>
      </div>
    );
  }
}

Gracias de antemano.

Origen Enlace
Alex
  • 103
  • 1
  • 2
  • 12

Acceder a un objeto dentro del state mediante parametro

Tengo un par de combobox que lleno con el state el objeto se ve así:

[
productos: [
    { id: "1", value: "Tennis", estado: false },
    { id: "2", value: "Camisa", estado: false },
    { id: "3", value: "Fajas", estado: false }
  ],
producto: { id: "", value: "", estado: false }
]

Donde el el valor de la opción sería el id y la descripción sería el value. Al seleccionar una opción, el objeto producto se actualiza con la opción seleccionada y habilita un checkbox que al darle click debería cambiar el estado del objeto producto y posteriormente buscar en el objeto productos el producto seleccionado y cambiar el estado ahi también. Tengo 3 combo con la misma estructura, por lo que quiero hacer una función generica para darle el valor al objeto producto u otro objeto con esta estructura y posteriormente otra para actualizar el estado. La primera función luce algo así:

handleDropdown(event) {
const objetoSeleccionado = event.target.value;
if (!(objetoSeleccionado === null || objetoSeleccionado === undefined)) {
  const objeto = this.state.[event.target.name].find(
    objeto => objeto.id === objetoSeleccionado
  );
  this.setState({
    [event.target.name]: objeto
  });
  enableInputs();
 }
}

Entonces en la línea que hace el this.state.[event.target.name].find me arroja el error de unexpected token. Entonces, hay algúna manera de hacer esto o tengo que crear una función para cada combo?

Gracias de antemano.