问题描述
我正在使用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;