在React中循环文本输入

可以通过使用数组的map方法来实现。首先，我们需要创建一个包含文本输入的数组，然后使用map方法遍历数组，为每个文本输入元素添加一个唯一的key属性。在map方法的回调函数中，我们可以设置每个文本输入元素的value和onChange属性，以便在用户输入时更新相应的状态。

下面是一个示例代码：

import React, { useState } from 'react';

const TextInputList = () => {
  const [inputs, setInputs] = useState(['']);

  const handleInputChange = (index, event) => {
    const newInputs = [...inputs];
    newInputs[index] = event.target.value;
    setInputs(newInputs);
  };

  const handleAddInput = () => {
    setInputs([...inputs, '']);
  };

  const handleRemoveInput = (index) => {
    const newInputs = [...inputs];
    newInputs.splice(index, 1);
    setInputs(newInputs);
  };

  return (
    <div>
      {inputs.map((input, index) => (
        <div key={index}>
          <input
            type="text"
            value={input}
            onChange={(event) => handleInputChange(index, event)}
          />
          <button onClick={() => handleRemoveInput(index)}>Remove</button>
        </div>
      ))}
      <button onClick={handleAddInput}>Add</button>
    </div>
  );
};

export default TextInputList;

在上面的代码中，我们使用useState钩子来创建一个名为inputs的状态变量，它是一个包含文本输入的数组。handleInputChange函数用于更新输入的值，handleAddInput函数用于添加新的文本输入，handleRemoveInput函数用于移除指定的文本输入。

通过以上代码，我们可以在React中实现循环文本输入。每个文本输入都可以独立地接收用户的输入，并且可以动态地添加或移除文本输入。这在表单、调查问卷等场景中非常有用。

腾讯云相关产品和产品介绍链接地址：