Блог

У меня есть компонент с выбором.

Когда я нажимаю на опцию, OnProductChange возвращает значение. Но мой e.target.value имеет значение [Object Object].

Однако {console.log (product} возвращает: {id: 1, name: «VAM»}

Когда я нажимаю Добавить запрос LibellePrerequis, я получаю это: {libelle_prerequis: «dd», produit: «[object Object]», typologie: «[object Object]»}

Я хотел бы получить это: {libelle_prerequis: «dd», продукт: «{id: 1, nom: «VAM»}», типология: «{id: 1, nom: «devis»}»}

 import React from 'react';
import { connect } from 'react-redux';
import 'bootstrap/dist/css/bootstrap.min.css';

export class LibellePrerequisForm extends React.Component  {
    constructor(props) {
        super(props);
        {console.log(props.store)}
        this.onLibellePrerequisChange = this.onLibellePrerequisChange.bind(this);
        this.onProduitChange = this.onProduitChange.bind(this);
        this.onTypologieChange = this.onTypologieChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            libelle_prerequis: props.libelleprerequis ? props.libelleprerequis.libelle_prerequis : '',
            produit: '',
            typologie: '',
            error: ''
        };
    }

    onLibellePrerequisChange(e) {
        const libelle_prerequis = e.target.value;
        console.log(libelle_prerequis)
        this.setState(() => ({ libelle_prerequis: libelle_prerequis }));
    }

    onProduitChange(e) {
        const produit = e.target.value;
        console.log(produit)
        this.setState(() => ({ produit: produit }));
    }

    onTypologieChange(e) {
        const typologie = e.target.value;
        console.log(typologie)
        this.setState(() => ({ typologie: typologie }));
    }

    onSubmit(e) {
        e.preventDefault();
        console.log(this.state.libelle_prerequis)
        console.log(this.state.produit)
        console.log(this.state.typologie)
        if (!this.state.libelle_prerequis || !this.state.produit || !this.state.typologie) {
            this.setState(() => ({ error: 'Please set libelle_prerequis amp; produit amp; typologie!' }));
        } else {
            this.setState(() => ({ error: '' }));
            this.props.onSubmitLibellePrerequis(
                {
                    libelle_prerequis: this.state.libelle_prerequis,
                    produit: this.state.produit,
                    typologie: this.state.typologie
                }
            );
        }
    }

    render() {
        return (
            <div>
                {this.state.error amp;amp; <p className='error'>{this.state.error}</p>}
                <form onSubmit={this.onSubmit} className='add-book-form'>

                    <input type="text" placeholder="libelle_prerequis" autoFocus
                        value={this.state.libelle_prerequis}
                        onChange={this.onLibellePrerequisChange} />
                    <br />

                    <select onChange={this.onProduitChange} className="form-control" id="exampleFormControlSelect2">
                        <option key={0} value={0} disabled selected> Selectionner Produit </option>
                        {
                            this.props.store.produits.map(produit => {
                            return (
                                <option key={produit.id} value={produit}> {console.log(produit)} {produit.nom} </option>
                            );
                        })}
                    </select>
                    <br />

                    <select onChange={this.onTypologieChange} className="form-control" id="exampleFormControlSelect2">
                        <option key={0} value={0} disabled selected> Selectionner Typologie </option>
                        {
                            this.props.store.typologies.map(typologie => {
                            return (
                                <option key={typologie.id} value={typologie}> {typologie.nom} </option>
                            );
                         })}
                    </select>
                    <br />

                    <button>Add Libelle Prerequis</button>
                </form>
            </div>
        );
    }
}


const mapStateToProps = (state) => {
    return {
        //insertion dans une variable
        store: state
    };
}

export default connect(mapStateToProps)(LibellePrerequisForm);
  

Можете ли вы мне помочь?

Проблема в том, что значение автоматически преобразуется в строку.

Решение состоит в том, чтобы взять ваше уникальное свойство produit (например produit.id ) и использовать его в качестве значения.

И в вашем onProduitChange вы можете выполнить поиск продукта с указанным идентификатором.

     onProduitChange(e) {
        const produit = e.target.value;
        this.setState(() => ({ produit: this.props.store.produits.find(p => p.id == e.target.value) }));
    }
  

Обратите внимание, что я использовал == вместо === , потому что я не уверен в ваших типах.

Эти ответы оставляют желать лучшего.

В теге option, для value использования JSON.stringify(mappedObject) .

Затем в handleChange функции используйте JSON.parse(event.target.value) , чтобы вернуть вашу строку обратно в объект, на котором вы можете запустить некоторый JavaScript.

 <select onChange={handleSelectChange}>
  <option value="none">Choose Your Players</option>
  {golfers.map((golfer, idx) => (
    <option value={JSON.stringify(golfer)} key={idx}>{golfer.fName}</option>
  ))}
</select>
  

При изменении вы должны установить значение в state и сделать компонент управляемым. Вам не хватает части value={}. Что-то вроде этого:

 state= {selectValue: {id: 1, nom: "VAM"}}

onProduitChange(e) {
        const produit = e.target.value;
        this.setState(() => ({ selectValue: produit }));
    }
 ....

 <select value={this.state.selectValue} onChange={this.onProduitChange}>
<option key={0} value={{id: 0, nom: ""}} disabled selected> Selectionner Produit </option>
 ....
 </select>