#javascript #reactjs
#javascript #reactjs
Вопрос:
У меня есть компонент с выбором.
Когда я нажимаю на опцию, 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);
Можете ли вы мне помочь?
Комментарии:
1. Вашу проблему / сообщение трудно понять, если вы сможете улучшить объяснение вашего сообщения, у вас будет больше шансов получить помощь.
2. Я подозреваю, что что-то не так с
select
я не вижу значения вselect
компоненте, аналогичном этому руководству reactjs.org/docs/forms.html#the-select-tag
Ответ №1:
Проблема в том, что значение автоматически преобразуется в строку.
Решение состоит в том, чтобы взять ваше уникальное свойство 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) }));
}
Обратите внимание, что я использовал ==
вместо ===
, потому что я не уверен в ваших типах.
Ответ №2:
Эти ответы оставляют желать лучшего.
В теге 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>
Ответ №3:
При изменении вы должны установить значение в 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>