所以我有一个产品设计页面，用户将从 4 个不同的选择字段中选择选项，然后从中显示产品图像。因此，我将根据处于状态的对象更新图片，其中包含每个参数，但是我在更新状态时遇到问题。
我最初有一个句柄更改，它更新了对象中的所有值，然后尝试了多个句柄更改函数，如下所示，并尝试在每个参数值中传播，但这也不起作用，这是下面现在的组件。它当前更新状态，但在选择下拉列表后删除对象中的其他项。我想这是通过使用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
我会像这样重组它：
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"，因为通过 curry，您正在传递对象的键来修改其值，因此您不会重复代码 4 次，保持对象的其余部分不变。
我希望我帮助你:)
您需要在这样的状态下保留以前的值 -
handleChange(event) {
this.setState(prevState => ({
value: {
...prevState.value,
plantstyle: event.target.value,
}
}))
}