React如何根据句子单词数动态渲染模态框内对应数量输入框

核心逻辑不需要提前写死固定长度的输入项状态，在已完成单词拆分的逻辑基础上，动态生成对应长度的状态数组即可，同时补全输入框的变更事件保证可正常输入。

• 第一步：调整输入项状态初始化
  初始状态设为空数组即可，不需要提前写固定个数的对象：

  const [inputFields, setInputField] = useState([])
  

• 第二步：修改模态框触发逻辑，动态生成输入项
  在已有的handleShow方法里，拆分完单词数组后，直接生成对应长度的输入项初始值，更新到状态中：

  const handleShow = (poem) => {
    const lyric = poem.lyrics;
    // 过滤连续空格、首尾空格产生的空字符串，避免生成无效输入框
    const words_array = lyric.split(' ').filter(item => item.trim() !== '');
    // 生成和单词数等长的输入框初始状态
    const dynamicInputs = Array.from({ length: words_array.length }, () => ({ word: '' }));
    // 如果需要把拆分出的单词默认填入输入框，替换上面一行为下面的代码即可
    // const dynamicInputs = words_array.map(word => ({ word: word }));
    setInputField(dynamicInputs);
    setShow(true);
  };
  

• 第三步：补全输入框变更事件，保证可正常输入
  原有渲染代码没有绑定onChange事件，输入框会处于只读状态，新增一个通用的输入处理函数：

  const handleInputChange = (index, e) => {
    // 浅拷贝原状态，避免直接修改state
    const updatedFields = [...inputFields];
    updatedFields[index].word = e.target.value;
    setInputField(updatedFields);
  };
  

• 第四步：调整渲染逻辑，绑定事件
  在原来的map渲染逻辑里加上onChange绑定即可：

  <InputGroup className="mb-3">
    {inputFields.map((inputField, index) => (
      <Form key={index}>
        <Form.Control 
          label={`单词 ${index + 1}`}
          name="word" 
          value={inputField.word}
          onChange={(e) => handleInputChange(index, e)}
        />
      </Form>
    ))} 
  </InputGroup>
  

注意：如果后续需要做输入框的增删、顺序调整，不要用index作为key，换成每个输入项唯一的id即可，当前固定个数渲染的场景下用index不会有问题。

内容的提问来源于stack exchange，提问作者Ose Daniel Okojie