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

这里有些错误：

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

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

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

动态创建和获取输入

2 个答案: