react中form元素使用跳坑

使用react开发常常会遇到使用form表单时报种种异常，这里总结了一些常见报错：

1 使用input时报警告：

MyCheckBox.js

const MyCheckBox = ({ name, type, checked }) => {
  return (
    <div className={styles['input-wrap']}>
      <input name={name || ''} type={type || 'radio'} checked={checked} onChange={() => void 0}/>
      <span></span>
    </div>
  )
}

 

缘由: checked初始状态没有肯定

解决：全部属性的初始值都要有，给checkd添加初始值

 

const MyCheckBox = ({ name, type, checked }) => {
  return (
    <div className={styles['input-wrap']}>
      <input name={name || ''} type={type || 'radio'} checked={checked || false} onChange={() => void 0}/>
      <span></span>
    </div>
  )
}