React：状态变化时如何修改循环渲染的input输入框取值

现有代码的核心问题 #

• 直接修改budget状态的引用值，没有触发React重渲染：原代码中budgetState = budget直接取原数组引用，修改元素值/push操作属于状态突变，且修改已有输入值时未调用setBudget，导致视图无法更新
• 输入框未绑定value属性，状态和视图脱节，切换manual时无法同步更新所有输入框的值，也容易触发受控/非受控组件混用报错
• 没有监听manual状态变化，切换为false时无法自动将所有输入框值设置为12

修复后的完整代码 #

import React, { useState, useEffect } from 'react';

function App() {
    // 初始化12个输入框的默认值，和索引一一对应
    const [budget, setBudget] = useState(Array(12).fill('12'));
    const [manual, setManual] = useState(false);

    // 监听manual变化，切换为false时所有值自动设为12
    useEffect(() => {
        if (!manual) {
            setBudget(Array(12).fill('12'));
        }
    }, [manual]);

    const handleInput = (inputEv, index) => {
        // 不修改原数组，返回新数组触发重渲染
        const newBudget = [...budget];
        newBudget[index] = inputEv.target.value;
        setBudget(newBudget);
    };

    return (
        <div>
            <form className="inputs">
                {Array(12).fill().map((e, index) => (
                    <div key={index} className="month">
                        <input
                            type="text"
                            // 始终绑定value，避免受控/非受控混用报错
                            value={budget[index]}
                            onChange={(e) => handleInput(e, index)}
                            // manual为false时禁用输入
                            disabled={!manual}
                        />
                    </div>
                ))}
            </form>
            <button onClick={() => setManual(!manual)}>Click</button>
        </div>
    );
}

export default App;

修复说明 #

• 把budget初始化为长度为12的数组，和输入框的索引一一对应，不用再判断新增/修改逻辑，取值赋值更简单
• 始终给输入框绑定value属性，保证是受控组件，不会触发混用报错
• 输入框的onChange直接传递当前索引，不用从DOM属性读取，性能更好逻辑更清晰
• 修改状态时始终返回新数组，保证React能检测到状态变化触发重渲染
• 通过useEffect监听manual状态，切换为false时自动把所有输入框的值重置为12

内容的提问来源于stack exchange，提问作者Yann Bohbot