如何解决React Suite接受者组件在更改时未更新表单值
我正在使用rsuitejs作为组件,在创建的表单中,我有一个名为 MotivationSlider 的自定义滑块,该滑块不会以值取值时的形式更新数据被改变了。自定义滑块看起来像这样:
import React,{ useState } from 'react';
import { Slider } from 'rsuite';
const MotivationSlider = () => {
const [motivation,setMotivation] = useState(2);
return (
<Slider
min={0}
max={4}
value={motivation}
graduated
progress
className="custom-slider"
onChange={v => setMotivation(v)}
renderMark={mark => {
if ([0,4].includes(mark)) {
return <span>{mark === 0 ? 'Not Very' : 'Highly!'}</span>;
}
return null;
}}
/>
);
};
export default MotivationSlider;
// CustomField.js:
import React from 'react';
import { FormGroup,ControlLabel,FormControl,HelpBlock } from 'rsuite';
const CustomField = ({ name,message,label,accepter,error,...props }) => {
return (
<FormGroup className={error ? 'has-error' : ''}>
<ControlLabel>{label} </ControlLabel>
<FormControl
name={name}
accepter={accepter}
errorMessage={error}
{...props}
/>
<HelpBlock>{message}</HelpBlock>
</FormGroup>
);
};
export default CustomField;
// FormPage.js:
<CustomField
accepter={MotivationSlider}
name="motivation"
/>
当我更改滑块值时,表单数据不会更改,但是,如果我将CustomField与常规的 Slider 一起使用,则表单值会更改。
<CustomField
accepter={Slider}
name="motivation"
min={0}
max={4}
/>
我在做什么错了?
解决方法
表单自定义控件需要实现属性onChange
,value
和defaultValue
。
import React,{ useState } from "react";
import { Slider } from "rsuite";
const MotivationSlider = React.forwardRef((props,ref) => {
const { value: valueProp,defalutValue,onChange } = props;
const [motivation,setMotivation] = useState(defalutValue);
const value = typeof valueProp !== "undefined" ? valueProp : motivation;
return (
<Slider
ref={ref}
min={0}
max={4}
value={value}
graduated
progress
className="custom-slider"
onChange={(v) => {
onChange(v);
setMotivation(v);
}}
renderMark={(mark) => {
if ([0,4].includes(mark)) {
return <span>{mark === 0 ? "Not Very" : "Highly!"}</span>;
}
return null;
}}
/>
);
});
export default MotivationSlider;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。