最近使用react-hook-form结合ant design的输入组件做表单,发现从接口获取的组件defaultValue不会更新到antd组件上,后来发现是因为antd的defaultValue一旦赋值不允许再次修改。
解决方法:将antd的key设置成defaultValue一致,或者随defaultValue一起更新,defaultValue更新时,因为key不同,组件会重新渲染,更新defaultValue。
<Controller
as={
<Input />
}
disabled={props.disabled}
key={props.defaultValue||props.name}
name={props.name}
control={props.control}
id={props.id}
defaultValue={props.defaultValue}
rules={{
required: props.required ? props.reqMsg?props.reqMsg:'必填' : '',
}}
placeholder={props.placeholder}
maxLength={props.maxLength}
style={props.style}
/>