因此，我有一个产品设计页面，用户将在其中从4个不同的选择字段中选择选项，然后从中显示产品图像。因此，即时通讯将根据状态为其中包含每个参数的对象来更新图片，但是即时通讯在更新状态时遇到问题。
我本来有一个handlechange，它更新了对象中的所有值，然后尝试如下所述的多个handlechange函数，并尝试在每个参数值中扩展，但这也不起作用，这是下面的组件。当前，它会更新状态，但是一旦选择了下拉列表，便会删除对象中的其他项目。我想这可以通过使用prevstate来解决，但不确定。
import React, { Component } from 'react';
import Swal from 'sweetalert2'
import placeholder from '../../imgs/CPC Yellow Cube Planter.jpg'
class Design extends Component {
constructor() {
super()
this.state=
{
value: {
plantstyle: "",
size: "",
colour: "",
finish: ""
}
}
this.handleChange = this.handleChange.bind(this);
this.handleChange2 = this.handleChange2.bind(this);
this.handleChange3 = this.handleChange3.bind(this);
this.handleChange4 = this.handleChange4.bind(this);
}
handleChange(event) {
this.setState({
value: {
plantstyle: event.target.value,
}
})
}
handleChange2(event) {
this.setState({
value: {
size: event.target.value,
}
})
}
handleChange3(event) {
this.setState({
value: {
colour: event.target.value,
}
})
}
handleChange4(event) {
this.setState({
value: {
finish: event.target.value,
}
})
}
sweetalertFunc() {
Swal.fire(
'Design a planter!',
'Personalise you product with the dropdown menus below.',
'info'
)
}
render() {
return (
<div className="container-fluid">
<h1>
Design A Planter
</h1>
<div className="destext">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div className="start"><button className="astext" onClick={this.sweetalertFunc}>How does it work? </button></div>
<form>
<div className="select">
<select name="plantstyledd" onChange={(e) => this.handleChange(e)}>
<option value="">Style</option>
<option value="Pillar">Pillar</option>
<option value="Vase">Vase</option>
<option value="Column">Column</option>
<option value="Cube">Cube</option>
</select>
<select name="size" onChange={(e) => this.handleChange2(e)}>
<option size="">Size</option>
<option size="small">Small</option>
<option size="medium">Medium</option>
<option size="large">Large</option>
</select>
<select name="Colour" onChange={(e) => this.handleChange3(e)}>
<option value="">Select colour</option>
<option value="red">Red</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
</select>
<select name="Paint Finish" onChange={(e) => this.handleChange4(e)}>
<option value="">Finish</option>
<option value="Wood">Matt</option>
<option value="Wood">Paint</option>
</select>
</div>
<div className="desimg">
<img src={placeholder} alt="placeholder"></img>
</div>
</form>
</div>
);
}
}
export default Design
答案 0 :(得分：1)
我会像这样重组它：
class Design extends React.Component {
constructor(props) {
super(props);
this.state = {
value: {
plantstyle: "",
size: "",
colour: "",
finish: "",
},
};
}
handleChange = field => event =>
this.setState(prevState => ({
value: {
...prevState.value,
[field]: event.target.value,
},
}));
sweetalertFunc() {
Swal.fire("Design a planter!", "Personalise you product with the dropdown menus below.", "info");
}
render() {
return (
<div className="container-fluid">
<h1>Design A Planter</h1>
<div className="destext">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div className="start">
<button className="astext" onClick={this.sweetalertFunc}>
How does it work?{" "}
</button>
</div>
<form>
<div className="select">
<select name="plantstyle" value={this.state.value.plantstyle} onChange={this.handleChange("plantstyled")}>
<option value="">Style</option>
<option value="Pillar">Pillar</option>
<option value="Vase">Vase</option>
<option value="Column">Column</option>
<option value="Cube">Cube</option>
</select>
<select name="size" value={this.state.value.size} onChange={this.handleChange("size")}>
<option size="">Size</option>
<option size="small">Small</option>
<option size="medium">Medium</option>
<option size="large">Large</option>
</select>
<select name="colour" value={this.state.value.colour} onChange={this.handleChange("colour")}>
<option value="">Select colour</option>
<option value="red">Red</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
</select>
<select name="finish" value={this.state.value.finish} onChange={this.handleChange("finish")}>
<option value="">Finish</option>
<option value="Wood">Matt</option>
<option value="Wood">Paint</option>
</select>
</div>
<div className="desimg">
<img src={placeholder} alt="placeholder" />
</div>
</form>
</div>
);
}
}
export default Design;
作为最基本的重构，可能仅引入函数“ handleChange”，因为通过咖喱传递了对象的键以修改其值，因此您无需重复执行4次代码即可保持对象的其余部分不变是。
希望我能对您有所帮助：）
答案 1 :(得分：0)
您需要将以前的值保持在这样的状态-
handleChange(event) {
this.setState(prevState => ({
value: {
...prevState.value,
plantstyle: event.target.value,
}
}))
}