React如何根据manual状态条件控制输入框的显示值与可编辑状态

实现方案 #

核心调整点 #

• 利用你已经声明的budget状态存储12个输入框的手动输入值
• input的value属性做三元判断：manual为true时取budget对应下标的值，为false时取固定均分的值2（24/12的计算结果）
• 补充handleInput函数，实现手动输入时更新budget对应下标的值
• 移除不必要的全局input状态和全局inputRef（多个输入框不需要共享同一个ref）

完整可运行代码 #

import { useState } from 'react';

// 组件内部逻辑
const [baseline, setBaseline] = useState('');
// 初始化budget为12个空字符串，对应12个输入框的手动值
const [budget, setBudget] = useState(new Array(12).fill(''));
const [manual, setManual] = useState(false);  

// 输入框变更处理函数
const handleInput = (e, index) => {
  const newBudget = [...budget];
  newBudget[index] = e.target.value;
  setBudget(newBudget);
};

// 渲染部分
return (
<form className="inputs">
  {Array.from({length: 12}, (item, mon) => {
    return new Date(0, mon).toLocaleString('en-US', {month: 'short'})
  }).map((mon,ind)=>(
    <div key={ind} className="month">
      <label>{`${mon} ${new Date().getFullYear().toString().slice(-2)}`} </label>
      <input  
        type="text" 
        onChange={(e) => handleInput(e, ind)} 
        value={manual ? budget[ind] : 2} 
        disabled={!manual}
      />
    </div>
  ))}
</form>
)

可选优化 #

如果需要切换回自动模式后清空之前的手动输入记录，可以新增useEffect监听manual状态变化：

useEffect(() => {
  if(!manual) {
    setBudget(new Array(12).fill(''));
  }
}, [manual])

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