0

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?

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.

0

1 respuesta 1

1

Hay muchas cosas que hay que suponer, pero lo que encuentro es, error de sintáxis en this.state.[event.target.name] y un tema en .setState, este no debería actualizar la clave que viene de [event.target.name], porque este apunta al mismo elemento que estamos iterando (productos en mi suposición) y dejaría de ser un array (entre otras cosas), en el ejemplo hardcodeo el name porque no se si vendrá de otro lado:

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 }      
    }
  }
  
  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
        });
     }
  }
  
  render() {
    return (
      <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>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

2
  • consulta, en la línea que pones: "La key producto está hardcodeada por mi", ahi sigue el setState, yo estoy haciendo un this.setState( { [this.state[elementName + "s"].map( productoFinal => productoFinal.id === objeto.id )]: [objeto] }, () => { console.log(this.state[event.target.name]); } ); Pero, me arroja el error: The specified value "[object Object]" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?
    – Alex
    el 9 oct. 2019 a las 21:58
  • Me parece que no son necesarias las [ ] en [this.state[elementName + "s"] porque en teoría ya es un array, quiza eso se arrasta y luego arroja ese error.
    – Emeeus
    el 9 oct. 2019 a las 22:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.