如何在不影响其功能的情况下将错误验证与字符限制同步,请参阅此https://codesandbox.io/s/nostalgic-mestorf-47jsvk?file=/src/App.js
const [formError, setFormError] = useState(false);
const CHARACTER_LIMIT = 1000;
const [getString, setString]= useState({
value: "",
length: 0
})
const onHandleChangeInput = (field, value) => {
setString({value: value, length: value.length})
}
const onHandleInputValidation = (field, value) => {
try {
Joi.assert(value, _.get(VALIDATION_SCHEMA, field));
setFormError(_.omit(formError, field));
return { error: false, valid: true };
} catch (err) {
return { error: err.message, valid: false };
}
};
<TextField
label="Name"
inputProps={{
maxlength: CHARACTER_LIMIT
}}
values={getString.name}
onChange={(value) => onHandleChangeInput('name', value)}
error={Boolean(formError.name)}
helperText={{formError.name}, `${getString.length}/${CHARACTER_LIMIT}`}
/>
我想要的就是这样
最佳答案
您的 onChange 处理程序获取事件
。您需要从中获取值
。
- 更新
onHandleChangeInput
,如下所示。
const onHandleChangeInput = (field, event) => {
const { value } = event.target;
setString({ value: value, length: value.length });
onHandleInputValidation(field, value);
};
- 为了清楚起见,将参数命名为
event
而不是value
。
onChange={(event) => onHandleChangeInput("name", event)}
- 使用三元组显示
错误消息
或helperText
。
helperText={
Boolean(formError.name)
? formError.name
: `${getString.length}/${CHARACTER_LIMIT}`
}
关于Reactjs TextField 辅助文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71232729/