如何将 4input 数据存储到数组中？答案

【问题标题】：how can I store 4input data to an array?如何将 4input 数据存储到数组中？
【发布时间】：2021-04-09 11:17:21
【问题描述】：

请帮助我不明白如何将输入数据存储到数组中在我的代码中，我有 4 个输入字段，我想将那里的数据存储到选项数组中像-option: ["option1","option2","option3","option4"], 请帮助不明白该怎么做，它真的很混乱（这都很粗糙{ qwertyuioplkjhgfdsazxcvbnm poiuytrewqasdfghjklmnbvcxz zxcvbnmlkjhgfdsaqwertyuiop zxcvbnmlkjhgfdsaqwertyuiop mnbvcxzasdfghjklpoiuytrewq mnvxzasdfghjklpoiuytrew mnbvcxzsdfghjklpoiuytrewq} )

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: "",
    option: [],
    error: "",
    loading: "false",
    getRedirect: false,
    formData: "",
  });

  const { question, option, error, loading, getRedirect, formData } = value;

  const handleChange = (event) => {
    // setError("");
    setValue({ ...value, [event.target.name]: event.target.value });
    console.log(event.target.value);
  };

  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="option"
            value={option}
          />
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option2"
            onChange={(event) => handleChange(event)}
            name="option"
            value={option}
          />
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option3"
            onChange={(event) => handleChange(event)}
            name="option"
            value={option}
          />
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option4"
            onChange={(event) => handleChange(event)}
            name="option"
            value={option}
          />
          <button type="submit" className="btn Submitbtn">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

export default AddPoll;

【问题讨论】：

也许这个链接会帮助你stackoverflow.com/questions/39769513/…

标签： javascript html css reactjs react-native

【解决方案1】：

如果您想拥有类似数组的选项，请使用以下代码。

  const handleChange = (event) => {
    let options = ...value.option;
    options.push(event.target.value);
    setValue({ ...value, option: options });
  };

【讨论】：

他的结构有点乱，也看看他的输入。

【解决方案2】：

将您的状态更改为：

  const [value, setValue] = useState({
    question: "",
    option: {option1:"",option2:"",option3:"",option4:""},
    error: "",
    loading: "false",
    getRedirect: false,
    formData: "",
  });

在 handleChange 函数上替换它。

const newOption = {...value.option, [event.target.name]: event.target.value};
setValue(prev => ({ ...prev , option: newOption  }));

还将您的输入值和名称更改为：

name="option1"
value={option.option1}

毕竟你应该在你的选项状态上得到这样的东西：

option:{option1 : "value",option2 : "value",...}

【讨论】：