Next.js 和 Typescript 项目上的复选框表单

Question

我正在与 Next.js 和 Typescript 合作一个项目。我有一个表单，这是第一次使用 Typescript 和复选框类型。我在尝试获取复选框的所有值时遇到问题，如果为真则添加，如果为假则删除。另外，我尝试了传播运算符，但它破坏了代码。这是代码：

州：

const [callTime, setCallTime] = useState<any>('');
const [isChecked, setIsChecked] = useState<boolean>(false);

数组：

const preferredTime = [
  {
    time: 'Before 9am',
  },
  {
    time: '9am to 12pm',
  },
  {
    time: '12pm to 3pm',
  },
  {
    time: 'After 3pm',
  },
];

处理程序：

const onChangeCheckBox = (e: { target: { checked: boolean; value: React.SetStateAction<string>; }; }) => {
    setIsChecked(() => e.target.checked);
    // setIsChecked(() => !isChecked);
    setCallTime(e.target.value)
    console.log('radio', e.target.value);
    console.log('radio', e.target.checked);
}

return:

                    <p>Preferred call back time</p>
                    <div className={styles.radioGroup}>
                      {preferredTime.map((item, index) => (
                        <div key={index} className={styles.radios}>
                          <label htmlFor={item.time} className={styles.checkLabel}>{item.time}
                            <input
                                type="checkbox" 
                                value={item.time}
                                name="time" 
                                onChange={onChangeCheckBox}
                                id={item.time}
                                // checked={item.checked}
                                />
                            <span className={styles.checkSpan}></span>
                          </label>
                        </div>
                      ))}
                    </div>

这是一个 Codesanbox 的完整代码：

Answer 1

我想你想做的是：https://codesandbox.io/s/damp-resonance-e4bnyc?file=/src/App.tsx

我用包含 {time: string, isChecked: boolean} 的对象数组替换了 callTime 状态中的字符串得益于此，您可以轻松管理数组中每个条目的检查状态。所以有了这个，我把 checked={item.isChecked} 放在你的 JSX

的地图中

Next.js 和 Typescript 项目上的复选框表单

Checkbox form on Next.js and Typescript project

reactjs

typescript

forms

checkbox

next.js