0

Estoy intentando simular esta acción donde tengo dos Select Option y dos botones. Uno para agregar un campo seleccionado del lado izquierdo al derecho, y el segundo regresar nueva mente el valor al primer Selec option.

introducir la descripción de la imagen aquí

Lo que tengo hasta ahora es lo siguiente. Dos arrays uno que representa una peque bd el cual llena de info el primer Select. Y el otro array representaría mi segundo select

articulos: [{
            codigo: 1,
            descripcion: 'papas',
        }, {
            codigo: 2,
            descripcion: 'naranjas',
        }, {
            codigo: 3,
            descripcion: 'peras',
        }],

        value: []

Lo que realizo es lo siguiente aquí estoy llenando mi primer select

<Input size="sm" type="select" name="selectMulti"
                            multiple={true} value={this.state.value} onChange={this.handleChange}>

                            {this.state.articulos.map(item => (
                                <option value={item.codigo}>{item.descripcion}</option>
                            ))}
                        </Input>

Y aquí el segundo con el Array value[].

<Input size="sm" type="select" name="selectMulti1" id="exampleSelectMulti" multiple>
                            {this.state.value.map(item => (
                                <option>{item}</option>
                            ))}
                        </Input>

El problema que tengo hasta ahora es que en mi handleChange actualiza el estado del segundo array cada ves que selecciono uno y mas datos.

 handleChange(e) {
    var options = e.target.options;
    var value = [];
    for (var i = 0, l = options.length; i < l; i++) {
        if (options[i].selected) {
            value.push(options[i].value);
        }
    }
    this.setState({ value: value });
}

Mi pregunta es ¿Que podría implementar como un intermediario para cuando seleccione un dato de la lista y presione el boton agregar lo pase del otro lado?.

4
  • 1
    Hola, has intentado algo? Si es asi por favor edita y pon el codigo tambien.
    – MitaCloud
    el 3 abr. 2019 a las 16:52
  • @EugeniBejan Acabo de publicar mi código, gracias el 4 abr. 2019 a las 21:11
  • hola Ricardo bienvenido a Stack Overflow en español porfavor no utilices el campo de respuesta para completar tu pregunta, simplemente dale click al boton de editar que se encuentra abajo de tu pregunta entre compartir y reportar o simplemente haz click en editar
    – Federico
    el 4 abr. 2019 a las 21:16
  • @Federico Gracias por el consejo son las primeras interacciones con Stack Overflow que tengo aun no entiendo muy bien como funciona pero gracias por la observación. el 4 abr. 2019 a las 21:26

1 respuesta 1

0

Puedes obtener el resultado deseado implementando dos componentes, el primero cuyo estado contenga los datos de dos Arrays que harán las veces de los datos de las dos cajas, y el elemento seleccionado en determinado momento, el segundo componente debe ser stateless y lo único que hará sera controlar la selección, con el fin de pasar su valor interno al componente padre.

Resultado final

Estado inicial

Selección de elemento

Resultado final

Código de componente padre

export default class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            arr1: [1,2,3,4,5], // Elementos de primera caja
            arr2: [], // Elementos de segunda caja
            selected: null // Elemento seleccionado
        }

        this.handleSelect = this.handleSelect.bind(this)
        this.handleAdd = this.handleAdd.bind(this)
        this.handleRemove = this.handleRemove.bind(this)
    }

    // Funcion encargada de actualizar elemento seleccionado
    handleSelect(selectedVal) {
        this.setState({
            selected: selectedVal !== this.state.selected ? selectedVal : null
        })
    }

    // Funcion encargada de pasar elementos del primer Array al segundo
    handleAdd() {
        if (this.state.arr1.includes(this.state.selected)) {
            this.setState({
                arr1: this.state.arr1.filter((val) => val !== this.state.selected).sort(),
                arr2: [...this.state.arr2, this.state.selected].sort(),
                selected: null
            })
        }
    }

    // Funcion encargada de pasar elementos del segundo Array al primero
    handleRemove() {
        if (this.state.arr2.includes(this.state.selected)) {
            this.setState({
                arr1: [...this.state.arr1, this.state.selected].sort(),
                arr2: this.state.arr2.filter((val) => val !== this.state.selected).sort(),
                selected: null
            })
        }
    }

    render() {
        return (
            <section>
                <div>
                    <ul>
                        { 
                            this.state.arr1.map((val) => {
                                return <Item
                                        key={val}
                                        handleClick={this.handleSelect}
                                        value={val}
                                        selected={this.state.selected === val} /> 
                            })
                        }
                    </ul>
                </div>
                <div>
                    <button onClick={this.handleAdd}>Agregar</button>
                    <button onClick={this.handleRemove}>Remover</button>
                </div>
                <div>
                    <ul>
                        { 
                            this.state.arr2.map((val) => {
                                return <Item
                                        key={val}
                                        handleClick={this.handleSelect}
                                        value={val}
                                        selected={this.state.selected === val} /> 
                            })
                        }
                    </ul>
                </div>
            </section>
        )
    }
}

Código de componente stateless

class Item extends Component {
    constructor(props) {
        super(props)

        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.props.handleClick(this.props.value)
    }

    render() {
        return <li className={this.props.selected ? 'selected' : ''} onClick={this.handleClick}>{this.props.value}</li>
    }
}

Y aquí te dejo el código CSS que use

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section {
    display: flex;
}

div:nth-child(1),
div:nth-child(3) {
    border: 1px solid lightgray;
    width: 100px;
}

div:nth-child(2) {
    display: flex;
    flex-flow: column;
    justify-content: center;
}

button {
    background-color: dodgerblue;
    border: 1px solid dodgerblue;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 15px;
    margin: 5px 10px;
    padding: 7.5px 15px;
}

button:hover {
    background-color: white;
    color: dodgerblue;
}

li {
    list-style: none;
    text-align: center;
    padding: 2.5px;
    cursor: pointer;
}

li:hover {
    background-color: whitesmoke;
}

li.selected {
    background-color: lightgray;
}
1

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.