node.js - 如何将 4input 数据存储到 anoptions 数组?
问题描述
这是我的反应代码,我想使用反应表单创建民意调查,但我不明白我的代码出了什么问题......!`这里我有 4 个输入字段 { option1: "", option2: "", option3 :“”,选项4:“”},但我不知道如何存储数据,就像我使用邮递员存储数据一样......!任何人都可以帮助请帮助......!请帮助我不明白该怎么做……!请用我的代码帮助......
import React, { useState, useEffect } from "react";
import "../styles.css";
import { isAutheticated } from "../auth/helper/index";
import { createaPoll } from "./helper/adminapicall";
const AddPoll = () => {
const { user, token } = isAutheticated();
const [value, setValue] = useState({
question: "",
options: { option1: "", option2: "", option3: "", option4: "" },
error: "",
loading: "false",
getRedirect: false,
formData: "",
});
const { question, options, error, loading, getRedirect, formData } = value;
const handleChange = (event) => {
// setError("");
setValue({ ...value, [event.target.name]: event.target.value });
// console.log(event.target.value);
const newOption = {
...value.options,
[event.target.name]: event.target.value,
};
setValue((prev) => ({ ...prev, options: newOption }));
};
const onSubmit = (event) => {
event.preventDefault();
setValue({ ...value, error: "", loading: true });
// console.log(handel);
createaPoll(user._id, token, { question, options }).then((data) => {
if (data.error) {
setValue({ ...value, error: data.error });
} else {
setValue({
...value,
question: "",
options: { option1: "", option2: "", option3: "", option4: "" },
error: "",
loading: "false",
getRedirect: false,
formData: "",
});
}
});
};
return (
<div className="AddPoll">
<div className="container">
<h1>Add New Poll</h1>
<form>
<textarea
rows="4"
cols="50"
className="form-control mb-2"
placeholder="Question"
name="question"
value={question}
onChange={(event) => handleChange(event)}
autoFocus
></textarea>
<input
type="text"
className="form-control mb-2"
placeholder="Option1"
onChange={(event) => handleChange(event)}
name="option1"
value={options.option1}
/>
<input
type="text"
className="form-control mb-2"
placeholder="Option2"
onChange={(event) => handleChange(event)}
name="option2"
value={options.option2}
/>
<input
type="text"
className="form-control mb-2"
placeholder="Option3"
onChange={(event) => handleChange(event)}
name="option3"
value={options.option3}
/>
<input
type="text"
className="form-control mb-2"
placeholder="Option4"
onChange={(event) => handleChange(event)}
name="option4"
value={options.option4}
/>
<button type="submit" onClick={onSubmit} className="btn Submitbtn">
Submit
</button>
</form>
</div>
</div>
);
};
export default AddPoll;
当我使用 POSTMAN 时,它工作正常!这是我的邮递员图片
所以我不明白该怎么做,我的反应表单代码,谁能帮助我......!
解决方案
尝试在函数中分离question
和option
值。handleChange
const handleChange = event => {
if (event.target.name === 'question') {
setValue({ ...value, [event.target.name]: event.target.value });
} else {
const newOption = {
...value.option,
[event.target.name]: event.target.value
};
setValue({ ...value, option: newOption });
}
};
推荐阅读
- python - 从 tkinter 中删除多个标签
- ios - 如何使用启动故事板或 XIB?
- flutter - 更改从外部类返回的抽屉小部件的抽屉图标
- python - 如何使用假设检验来比较组
- java - 无法在 ajax 覆盖弹出窗口中单击或发送键,并使用 selenium 和 java 显示 Element not Intractable 异常
- react-native - [未处理的承诺拒绝:TypeError:_reactNative.NativeModules.RNDatePickerAndroid.dismiss 不是函数
- python - 在postgresql表django中插入数据
- php - 如何保存函数的结果
- javascript - Fabric.js 逐像素操作 Image 对象以改变颜色
- c - C语言中的语法错误