如何在textField内缩短此错误?

Question

我有一个Textfield，如果输入的密码与确认密码不匹配，将显示一个错误。它确实工作，但是，我如何缩短这一点，因为我必须重复这些代码行到其他文本字段。

<TextField
label="Password"          
error={
errors.length > 0 && (
<ul>
{errors.map((err, index) => {
return <li key={index}>{err}</li>;
})}
</ul>
)
}
helperText={errors}
/>

<TextField
type="password"
id="standard2"
value={confirmPassword}
error={
errors.length > 0 && (
<ul>
{errors.map((err, index) => {
return <li key={index}>{err}</li>;
})}
</ul>
)
}
helperText={errors}
/>

如何缩短代码的errors.map lines。

Answer 1

用helperText代替error显示消息错误

<TextField
type="password"
id="standard2"
value={confirmPassword}
error={errors.length > 0}
helperText={
<ul>
{errors.map((err, index) => {
return <li key={index}>{err}</li>;
})}
</ul>
}
/>;

Answer 2

在material-UI中，TextField组件的错误道具将只接受布尔值。而helperText道具将接受节点。请看这里- https://material-ui.com/api/text-field/#textfield-api

您可以简单地创建一个组件，它将在每个字段中呈现错误消息。例如

import { TextField } from '@material-ui/core';
const ErrorMsgs = ({ errors }) => (
<ul>
{errors.map((err) => (
<li key={err}>{err}</li>
))}
</ul>
);
function Form() {
return (
<form>
<TextField
label="Password"
error={errors.length > 0}
helperText={<ErrorMsgs errors={errors} />}
/>
<TextField
label="Password"
error={errors.length > 0}
helperText={<ErrorMsgs errors={errors} />}
/>
</form>
);
}