react Input 的defaultValue不随着state变化

前端之家收集整理的这篇文章主要介绍了react Input 的defaultValue不随着state变化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

第一次遇到input的defaultValue不会变化,或者只记录前一次的数据,后面的数据不会及时更新,而value是不能改变input的值的

解决办法就是给父级的div或者form添加一个可变的key值

  1. class TeacherInfoWidget extends React.Component{
  2. render(){
  3. const {onChange,teacherInfo,No,newKey}=this.props;
  4. const mobNum='mobNum';
  5. const startYear='startYear';
  6. const name='name';
  7. const gender='gender';
  8. // const connectinfo='connectinfo';
  9. const onInputChange = (field) => {
  10. return e => {
  11. const { currentTarget: { value } } = e;
  12. if (onChange) {
  13. onChange({field,value});
  14. }
  15. }
  16. }
  17. const onSelectChange = (field) => {
  18. return value => {
  19. if (onChange) {
  20. onChange({field,value});
  21. }
  22. }
  23. }
  24. return (
  25. <div className='teacherInfo-model' key={ No =='1' ? newKey :teacherInfo._id || No }>
  26. <div className='model-row'>
  27. <label htmlFor="">登录名</label>
  28. <Input placeholder="登录名" className='text-type' defaultValue={No == '1'? '' :teacherInfo.mobNum} onChange={onInputChange(mobNum)}/>
  29. </div>
  30. <div className='model-row'>
  31. <label htmlFor="">入职年份</label>
  32. <InputNumber min={1970} max={2100} defaultValue={No == '1'? '' : teacherInfo.startYear} onChange={onSelectChange(startYear)}/>
  33. </div>
  34. <br/>
  35. <div className='model-row'>
  36. <label htmlFor="">姓名</label>
  37. <Input placeholder="姓名" className='text-type' defaultValue={No == '1'? '' : teacherInfo.name} onChange={onInputChange(name)}/>
  38. </div>
  39. <div className='model-row'>
  40. <label htmlFor="">性别</label>
  41. <Select style={{ width: 60 }} defaultValue={teacherInfo.gender== 'M' ? '男' : '女'} onChange={onSelectChange(gender)} >
  42. <Option key='1'value="M">男</Option>
  43. <Option key='2' value="F">女</Option>
  44. </Select>
  45. </div>
  46. <br/>
  47. {/*<div className='model-row'>*/}
  48. {/*<label htmlFor="">联系方式</label>*/}
  49. {/*<Input placeholder="联系方式" className='text-type' onChange={onInputChange(connectinfo)}/>*/}
  50. {/*</div>*/}
  51. </div>
  52. );
  53. }
  54. }

猜你在找的React相关文章