我有一个带有选择的组件。
当我单击某个选项时,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 & produit & 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 && <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
中,您可以搜索具有给定 ID 的产品。
onProduitChange(e) {
const produit = e.target.value;
this.setState(() => ({ produit: this.props.store.produits.find(p => p.id == e.target.value) }));
}
请注意,我使用了 ==
而不是 ===
,因为我不确定您的类型。
关于javascript - REACT 问题 [object object] 选择 OnChange,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55178748/