具有多个输入的React Form单个handleChange函数和对复杂对象的setState

问题描述

我在React组件中有一个表单，该表单有多个输入，这些输入代表在组件状态中定义的对象属性。我想通过从this.state传递填充的对象向REST API发出POST请求，以创建一个实体，该对象又由表单输入修改。 我无法弄清楚如何使用单个handleChange（）方法来更新所有字段的onChange事件的状态。我参考了articles来描述此问题，但没有复杂的类型。我什至尝试通过使用[event.target.name]并为所有表单输入添加name属性来实现动态键名，但是没有结果。

这是我的代码。 组件的构造函数和状态：

class IngredientForm extends React.Component {
constructor(props) {
        super(props);
        this.apiService = new apiService();
        this.state = {
            ingredient: {
                id: "",name: "",dateAdded: "",}
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
}

handleChange和handleSubmit方法：

    handleChange(event) {
        const ingredient = this.state.ingredient;
        ingredient[event.target.name] = event.target.value;
        this.setState({ ingredient: ingredient });
    }

handleSubmit(event) {
        //Fetch code goes here
        let response =  this.apiService.postDataAsync("https://localhost:5001/api/ingredients",this.state.ingredient);
        this.setState({ingredient:{id: response.id,dateAdded: response.dateAdded}});
        event.preventDefault();
    }

这是形式的代码：

<form onSubmit={this.handleSubmit}>
    <label>
        Name
    </label>
    <input
        type="text"
        name="name"
        value={this.state.ingredient.name}
        onChange={this.handleChange}
        required
    />
        <label>Date added</label>
        <input
            type="date"
            name="dateAdded"
            value={this.state.ingredient.dateAdded}
            onChange={this.handleChange}

        />

    <button type="submit" value="Submit">
        Save
    </button>

</form>

很高兴收到您的帮助。我试图在论坛上事先找到类似的话题，但是没有成功，每个人都讨论了状态为原始类型的情况。

解决方法

嘿，问题出在您设定的状态，您能解决这个问题吗？

handleChange(event) {
    const {name,value} = event.target;
    this.setState({ 
        ingredient: {
            ...this.state.ingredient,[name]: value
        } 
    });
}