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>
  )
}