第一次遇到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>
);
}
}
原文地址:https://www.jb51.cc/react/303051.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。