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

Question

我在 React 组件中有一个表单，它有几个输入，代表对象的属性，在组件的状态中定义。我想向我的 REST API 发出一个 POST 请求，我想通过它创建一个实体，方法是从 this.state 传递填充的对象，而该对象又由表单输入修改。我无法弄清楚如何使用单个 handleChange() 方法来更新所有字段的 onChange 事件的状态。我参考了描述这个问题但没有复杂类型的文章。我什至尝试通过使用 [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>

我会很高兴收到你的帮助。之前尝试在论坛上找过类似的话题，但是没有成功，大家讨论了状态中原始类型的情况。

标签： reactjssetstatecomplextype

Answer 1

嘿，问题出在你的设定状态，你能做到吗？

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