Базовая форма с реагировать


Я работаю на основной с помощью среагировать и мне нужна ваша помощь, чтобы улучшить эту часть моего кода, особенно validate и onSubmit.

state = {
    email: "",
    emailError: "",
  }; 
  change = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

    validate = () => {
    let isError = false;
     const errors = {
      emailError: "",
    };

    if (this.state.email.indexOf("@") === -1) {
      isError = true;
      errors.emailError = "Requires valid email";
    }

    this.setState({
      ...this.state,
      ...errors
    });

    return isError;
  }; 
  onSubmit = e => {
    e.preventDefault();
    const err = this.validate();
    if (!err) {
      this.props.onSubmit(this.state);
      this.setState({

        email: "",
        emailError: "",
      });
    }
  };

  render() {
    return (
      <form>
        <TextField
          name="email"
          hintText="Email"
          floatingLabelText="Email"
          value={this.state.email}
          onChange={e => this.change(e)}
          errorText={this.state.emailError}
          floatingLabelFixed
        />
        <br />
        <RaisedButton label="Submit" onClick={e => this.onSubmit(e)} primary />
      </form>
    );


143
2
задан 23 марта 2018 в 09:03 Источник Поделиться
Комментарии
1 ответ

Насколько я знаю, CodeReview для завершения программы. Я думаю, что этот вопрос будет лучше всего подходит в сайте StackOverflow. Это, как говорится, я не вижу смысла в озвучивании вопрос на другом сайте.

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

<form>
<input type="text" name="input1" value={this.state.input1} onChange={e => this.change(e)} required />
</form>

Вы можете найти больше на МДН веб-документы для необходимых атрибутов.

Примечание: Вы можете также связать this.change как this.change = this.change.bind(this) в конструкторе, если вы намерены использовать его для нескольких полей. Это сэкономит вам несколько байт, но если это только один раз, связывая его в сам элемент, как у вас должно быть в порядке.

2
ответ дан 10 апреля 2018 в 02:04 Источник Поделиться