react Input 的defaultValue不随着state变化

第一次遇到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>
    );
  }
}

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...