React中如何通过单次按钮点击动态清空N个输入字段

要实现单次点击清空所有tenure输入字段的功能，只需添加清空按钮和对应的状态更新逻辑即可，具体步骤如下：

1. 实现清空函数 #

在组件内新增handleClearAll函数，通过setTnDates更新状态，将数组中每个元素的tenureDate重置为空字符串：

const handleClearAll = () => {
  setTnDates(prev => prev?.map(item => ({ ...item, tenureDate: '' })) || null);
};

这里用可选链操作符?.避免tnDates为null时触发报错，保证逻辑健壮性。

2. 渲染清空按钮 #

在组件的JSX部分添加按钮并绑定清空函数，同时可根据tnDates状态控制按钮可用性：

{tnDates && (
  <button onClick={handleClearAll} disabled={tnDates.every(item => item.tenureDate === '')}>
    清空所有日期
  </button>
)}

当所有输入框已为空时，按钮自动置灰，避免无效操作。

完整组件代码 #

整合后的完整代码如下：

const { useState, useEffect } = React;
const Thingy = ({ ...props }) => {
  const [tenure, setTenure] = useState(null);
  // state to hold tenure-dates (array of varying size)
  const [tnDates, setTnDates] = useState(null);

  const handleTenureChange = ev => setTenure(ev.target.value);

  useEffect(() => setTnDates(
    (tenure && tenure > 0)
      ? ([...Array(+tenure).keys()].map(
        id => ({ id, tenureDate: '' })
      )) : null
  ), [tenure]);


  const handleDateChange = ev => {
    const idx = ev.target.id;
    const val = ev.target.value;
    setTnDates(prev => {
      const nd = [...prev];
      nd[idx].tenureDate = val;
      return nd;
    });
  };

  // 新增清空函数
  const handleClearAll = () => {
    setTnDates(prev => prev?.map(item => ({ ...item, tenureDate: '' })) || null);
  };

  return (
    <div>
      <input
        type="number"
        value={tenure || ''}
        onChange={handleTenureChange}
        min="1"
        placeholder="输入 tenure 数量"
      />
      {/* 渲染日期输入框 */}
      {tnDates?.map(item => (
        <input
          key={item.id}
          id={item.id}
          type="date"
          value={item.tenureDate}
          onChange={handleDateChange}
          placeholder={`日期 ${item.id + 1}`}
        />
      ))}
      {/* 清空按钮 */}
      {tnDates && (
        <button 
          onClick={handleClearAll} 
          disabled={tnDates.every(item => item.tenureDate === '')}
        >
          清空所有日期
        </button>
      )}
    </div>
  );
};

逻辑说明 #

• 清空函数通过map遍历原数组，返回每个元素的副本并重置tenureDate，保证状态更新的不可变性。
• 按钮的disabled属性通过every判断所有输入框是否为空，避免重复触发清空操作。
• 使用可选链?.处理tnDates为null的情况，防止渲染时出现报错。

内容的提问来源于stack exchange，提问作者Rohit Rai