Как добавить проверку в поля ввода формы пользовательского интерфейса

Question

У меня есть функциональный компонент реагирования, построенный с использованием формы Material ui, которая содержит TextField и событие onChange, которое обрабатывается в «Компоненте контейнера». Ниже приведен код формы, где мне нужно добавить required в качестве проверки формы на стороне клиента, но она не работает. Нужно ли добавить некоторую логику в компонент контейнера?

<form className={classes.container}>
<Grid container item xs={12} alignItems="center">
<TextField
  id="outlined-bare"
  className={classes.textField1}
  defaultValue=""
  required
  margin="normal"
  variant="outlined"
  autoComplete="on"
  InputProps={{ style: { height: 40 } }}
  onChange={(e) => handleChange(e, 'Name')}
/>

, а вот обработчик события в компоненте контейнера, как показано ниже

 setInput = (e, source) => {
    e.preventDefault();
    switch  (source) {
        case "Name":
            this.setState({
                ...this.state,
                Name: e.target.value
            })
            break;
    default:
            this.setState({...this.state})
            break;
    }
}

 return (
        <div>
            <Drawer
                route={routes.abc}
                history={this.props.history}
                handleChange={this.setInput}
            />
        </div>
    )

Что не так,а отсутствует? Я новичок в ReactJs. Пожалуйста, предложите.

Answer 1

Имея информацию, я бы предложил сделать что-то вроде следующей упрощенной версии:

Контейнер

class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      other_value: '',
    }
  }

  handleChange = (field, value) => {
    this.setState({ [field]: value });
  }

  valid = () => {
    if (!this.state.name) {
      return false;
    }
  }

  submit = () => {
    if (this.valid()) {
      // call your redux submit
    }
  }

  render() {
    return (
      <MyForm
        values={this.state}
        handleChange={this.handleChange}
        submit={this.submit}
      />
    );
  }
}

Компонент формы

const MyForm = (props) => {
  return (
    <form onSubmit={props.submit}>
      <TextField
        onChange={(e) => props.handleChange('name', e.target.value)}
        value={props.values.name}
        required
      />
      <TextField
        onChange={(e) => props.handleChange('other_value', e.target.value)}
        value={props.values.other_value}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Сначала, есливы используете onChange на своем входе, вы должны также указать его значение, чтобы гарантировать их синхронизацию.

Во-вторых, если вы хотите, чтобы опора required имела эффект, вы должны убедиться, чтоВаша функция отправки вызывается формой. Свойство required просто передается элементу input, который будет использован упаковкой form (объяснение необходимости) . Поэтому, если форма не та, которая вызывает вашу функцию отправки, required будет игнорироваться.

Наконец, я предоставил только простую функцию проверки, если вы хотите, чтобы она была более полной, просто добавьте больше провероки возвращать конкретные ошибки или массив ошибок вместо простого true или false. Вы также можете полностью пропустить функцию проверки, если вам нужна простая обязательная проверка.