动态创建和获取输入

Question

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

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

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

Answer 1

这里有几件事是错误的：

1. 你不要在addOption中设置你的状态，不要直接修改状态对象，更喜欢解构数组，修改它并设置状态。
2. 您的地图函数不带任何参数，因此每次输入名称都是相同的，使用参数和索引来确定要在handleQuestionChange中更改哪个选项

3. 您的 addOption 可以通过直接在 setFormData 中使用 question 属性来改进（它的工作方式与您所做的一样，但在我看来，这样做更干净）

   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;
   

Answer 2

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

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)}
}