react Input 的defaultValue不随着state变化

浅浅的花香味﹌ 2022-06-09 01:47 207阅读 0赞

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

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

class TeacherInfoWidget extends React.Component{ render(){ const {onChange,teacherInfo,No,newKey}=this.props; const mobNum='mobNum'; const startYear='startYear'; const name='name'; const gender='gender'; // const connectinfo='connectinfo'; const onInputChange = (field) => { return e => { const { currentTarget: { value } } = e; if (onChange) { onChange({field, value}); } } } const onSelectChange = (field) => { return value => { if (onChange) { onChange({field, value}); } } } return ( <div className='teacherInfo-model' key={ No =='1' ? newKey :teacherInfo._id || No }> <div className='model-row'> <label htmlFor="">登录名</label> <Input placeholder="登录名" className='text-type' defaultValue={No == '1'? '' :teacherInfo.mobNum} onChange={onInputChange(mobNum)}/> </div> <div className='model-row'> <label htmlFor="">入职年份</label> <InputNumber min={1970} max={2100} defaultValue={No == '1'? '' : teacherInfo.startYear} onChange={onSelectChange(startYear)}/> </div> <br/> <div className='model-row'> <label htmlFor="">姓名</label> <Input placeholder="姓名" className='text-type' defaultValue={No == '1'? '' : teacherInfo.name} onChange={onInputChange(name)}/> </div> <div className='model-row'> <label htmlFor="">性别</label> <Select style={ { width: 60 }} defaultValue={teacherInfo.gender== 'M' ? '男' : '女'} onChange={onSelectChange(gender)} > <Option key='1'value="M">男</Option> <Option key='2' value="F">女</Option> </Select> </div> <br/> {/*<div className='model-row'>*/} {/*<label htmlFor="">联系方式</label>*/} {/*<Input placeholder="联系方式" className='text-type' onChange={onInputChange(connectinfo)}/>*/} {/*</div>*/} </div> ); } }