Javascript 动态创建和获取输入

我需要在单击按钮时动态添加新的输入字段，并在数组中获取这些输入的用户输入。这就是我所拥有的，我不知道如何做阵列。此外，屏幕上的组件仅在我更改状态时更新。不在按钮上单击。 这就是我所拥有的：

import React, { useState } from 'react'

const CreatePoll = () => {


const [formData, setFormData] = useState({
    question: '',
    options: ['hi', 'there']
});

const {
    question,
    options
} = formData;

const addOption = e => {
    e.preventDefault();

    options.push([''])

    console.log(options.length);
}

const handleQuestionChange = (e) => setFormData({
    ...formData,
    [e.target.name]: e.target.value
})

const handleOptionChange = e => setFormData({
    ...formData
    // options: []
})


const handleSubmit = async e => {
    e.preventDefault();

    console.log(formData)
}

return (
    <form onSubmit={handleSubmit}>
        <input 
            placeholder="enter your question" 
            type="text" 
            onChange={handleQuestionChange}
            name="question" />
        {options.map(() => {
            return (
                <input 
                    placeholder="option" 
                    type="text" 
                    onChange={handleOptionChange}
                    name="option" />
            )
        })}
        <input type="button" value="Add new option" onClick={addOption} />
        <input type="submit" value="Submit" />
    </form>
)
}

export default CreatePoll

import React，{useState}来自“React”
const CreatePoll=（）=>{
常量[formData，setFormData]=useState({
问题：''，
选项：['hi'，'there']
});
常数{
问题:，
选择权
}=表格数据；
const addOption=e=>{
e、 预防默认值（）；
选项。推送（[“”]）
console.log（options.length）；
}
常量handleQuestionChange=（e）=>setFormData({
…表格数据，
[e.target.name]：e.target.value
})
const handleOptionChange=e=>setFormData({
…formData
//选项：[]
})
const handleSubmit=async e=>{
e、 预防默认值（）；
console.log（formData）
}
返回(
{options.map（（）=>{
返回(
)
})}
)
}
导出默认CreatePoll

---

我尝试在单击addOption按钮时，向选项状态添加一个空字符串。数组的长度会更新，但屏幕上的组件不会更新，直到我在输入框中键入并且状态发生变化。我还需要将输入框的值映射到它们在数组中各自的位置。他们还应该能够在任何时候进行编辑。这是怎么做到的

要在按钮上添加新选项，请单击您需要更改此功能：

const addOption = e => {
    e.preventDefault();
    options.push([''])
    console.log(options.length);
}

将来

const addOption = e => {
    e.preventDefault();
    const newOptions = {...formData.options}
    newOptions.concat([''])
    setFormData({...formatData, options: newOptions)}
}

---

这里有几个问题：

您不需要在addOption中设置状态，也不需要直接修改state对象，更需要对数组进行解构、修改并设置状态

您的映射函数不接受任何参数，因此每次都是相同的输入名称，请使用参数和索引，现在在handleQuestionChange中更改哪个选项

您的addOption可以通过在setFormData中直接使用question属性来改进（它的工作原理与您的相同，但在我看来，它更简洁）

import React，{useState}来自“React”；
const CreatePoll=（）=>{
常量[formData，setFormData]=useState({
问题：''，
选项：['hi'，'there']，
});
常数{
问题:，
选项，
}=表格数据；
const addOption=e=>{
e、 预防默认值（）；
const newOptions=[…选项]；
newOptions.push（“”）；
setFormData（{…formData，选项：newOptions}）；
console.log（options.length）；
};
常量handleQuestionChange=e=>{
setFormData({
…表格数据，
问题：目标价值，
});
};
const handleOptionChange=（e，索引）=>{
const newOptions=[…选项]；
newOptions[index]=e.target.value；
setFormData({
…表格数据，
选项：新选项，
});
};
const handleSubmit=async e=>{
e、 预防默认值（）；
console.log（formData）；
};
返回(
{options.map（（opt，index）=>(
handleOptionChange（e，index）}
名称={opt}
/>
))}
);
};
导出默认CreatePoll；

---

这给了你一个线索吗？这解决了组件问题，但是数组中的值仍然不会根据输入而改变。我不确定你想要什么。当您更改输入并单击提交时，console.log中的值对我来说很好，它们具有我在输入中键入的值。好的，我明白了，您提到的是未显示的默认值。只需在您的输入中添加

value={opt}

，我已经编辑了我的回复。

import React, { useState } from 'react';

const CreatePoll = () => {
  const [formData, setFormData] = useState({
    question: '',
    options: ['hi', 'there'],
  });

  const {
    question,
    options,
  } = formData;

  const addOption = e => {
    e.preventDefault();
    const newOptions = [...options];
    newOptions.push('');

    setFormData({ ...formData, options: newOptions });
    console.log(options.length);
  };

  const handleQuestionChange = e => {
    setFormData({
      ...formData,
      question: e.target.value,
    });
  };

const handleOptionChange = (e, index) => {
  const newOptions = [...options];
  newOptions[index] = e.target.value;

  setFormData({
    ...formData,
    options: newOptions,
  });
};


const handleSubmit = async e => {
  e.preventDefault();

  console.log(formData);
};

return (
  <form onSubmit={handleSubmit}>
    <input
      placeholder="enter your question"
      type="text"
      onChange={handleQuestionChange}
      name="question"
    />
    {options.map((opt, index) => (
      <input
        value={opt}
        key={`option_${index}`}
        placeholder="option"
        type="text"
        onChange={e => handleOptionChange(e, index)}
        name={opt}
      />
    ))}
    <input type="button" value="Add new option" onClick={addOption} />
    <input type="submit" value="Submit" />
  </form>
 );
};

export default CreatePoll;