Reactjs TextField helperText

Question

如何在不影响其功能的情况下将错误验证与字符限制同步，请参阅此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}`}
    />

我要的就是这样

Answer 1

import React, { useState } from "react";
import { TextField } from "@mui/material";
import "./styles.css";

export default function App() {
  const CHARACTER_LIMIT = 1000;
  const [getString, setString] = useState({
    value: "",
    length: 0
  });
  const onHandleChangeInput = (field, value) => {
    const { value: inputValue } = value.target;
    setString({ value: inputValue, length: inputValue.length });
  };
  return (
    <TextField
      label="Name"
      inputProps={{
        maxLength: CHARACTER_LIMIT
      }}
      values={getString.value}
      onChange={(e) => onHandleChangeInput("name", e)}
      error={Boolean(getString.length === CHARACTER_LIMIT)}
      helperText={`${getString.length}/${CHARACTER_LIMIT}`}
    />
  );
}

您在发送事件时没有使用 onChange 的值，然后我为您提取了该值。看看

Answer 2

您的 onChange 处理程序获得 event。您需要从中获取 value。

像下面那样更新 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)}

使用三元表示error message或helperText。

      helperText={
        Boolean(formError.name)
          ? formError.name
          : `${getString.length}/${CHARACTER_LIMIT}`
      }

Answer 3

只要你没有删除inputProps={{ maxLength: CHARACTER_LIMIT }}，你就不能超过字符限制，之后你可以使用FormHelperText组件并传递两条消息如下：

<FormHelperText
  error={Boolean(formError.name)}
  sx={{
    display: 'flex',
    justifyContent: 'space-between',
    padding: '0 10px'
  }}
>
  <span>{formError.name}</span>
  <span>{`${getString.length}/${CHARACTER_LIMIT}`</span>
</FormHelperText>

Reactjs TextField helperText

Reactjs TextField helperText

reactjs

material-ui