Semantic-ui-реакции Поле ввода данных при автоматической отправке запускает неправильное поведение - PullRequest
Новая
       6

Semantic-ui-реакции Поле ввода данных при автоматической отправке запускает неправильное поведение

0 голосов
/ 23 мая 2018

У меня есть форма с полем ввода, TextArea и двумя (2) кнопками в нижнем колонтитуле формы.Первая кнопка предназначена для сброса формы, а вторая - для ее обновления.Моя проблема заключается в том, что, когда я нажимаю «ввод» в поле ввода, форма отправляется, но кажется, что она всегда запускает логику первой кнопки (в моем случае сбрасывает форму).Если я переключаю порядок кнопок так, чтобы кнопка «Обновить» была первой, то форма обновляется после нажатия «ввод».Только кнопка обновления имеет тип «отправить».

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

Как управлять логикой ввода в поле ввода вформа?

Вот код: 

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Input, TextArea, Button } from 'semantic-ui-react';
import I18n from '../../shims/i18n_global';

export default class SpaceDetails extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      details: {
        id: props.id,
        name: props.name,
        description: props.description,
      },
      formError: false,
      formDisabled: true,
    };

    this.originalDetails = Object.assign({}, this.state.details);

    this.handleNameUpdate = this.handleNameUpdate.bind(this);
    this.handleDescriptionUpdate = this.handleDescriptionUpdate.bind(this);
    this.handleDetailsUpdate = this.handleDetailsUpdate.bind(this);
    this.handleResetForm = this.handleResetForm.bind(this);
  }

  setFormStatus(error = false, disabled = false) {
    this.setState({ formError: error, formDisabled: disabled });
  }

  setDetailsValue(detailProp, value) {
    this.setState({
      details: Object.assign(
        {},
        this.state.details,
        {
          [detailProp]: value,
        },
      ),
    });
  }

  get trimmedDetails() {
    return Object.assign(
      {},
      this.state.details,
      { name: this.state.details.name.trim() },
      { description: this.state.details.description.trim() },
    );
  }

  handleNameUpdate(event) {
    this.setFormStatus(event.target.value.trim() === '');
    this.setDetailsValue('name', event.target.value);
  }

  handleDescriptionUpdate(event) {
    this.setFormStatus();
    this.setDetailsValue('description', event.target.value);
  }

  handleDetailsUpdate() {
    this.props.onUpdate(Object.assign(
      { icon: null },
      this.trimmedDetails,
    ));
    this.resetFileInputField();
  }

  handleResetForm() {
    this.setFormStatus(false, true);
    this.setState({ details: this.originalDetails });
  }

  render() {
    return (
      <Form >
        <h2 >{I18n.t('space.edit.details.title')}</h2 >
        <Form.Field
          className="field-full"
        >
          <Input
            id="name"
            type="text"
            name="name"
            placeholder={I18n.t('space.edit.details.placeholders.name')}
            size="large"
            error={this.state.formError}
            value={this.state.details.name}
            onChange={this.handleNameUpdate}
          />
        </Form.Field >
        <Form.Field
          className="field-full"
        >
          <TextArea
            id="description"
            className="field-full"
            rows="4"
            cols="50"
            placeholder={I18n.t('space.edit.details.placeholders.description')}
            value={this.state.details.description}
            onChange={this.handleDescriptionUpdate}
          />
        </Form.Field >
        <div className="form-footer" >
          <Button
            size="big"
            className="btn-xxl"
            content="Reset"
            onClick={this.handleResetForm}
          />
          <Button
            type="submit"
            primary
            size="big"
            className="btn-xxl"
            content="Save"
            disabled={this.state.formDisabled}
            onClick={this.handleDetailsUpdate}
          />
        </div >
      </Form >
    );
  }
}

SpaceDetails.defaultProps = {
  name: '',
  description: '',
};

SpaceDetails.propTypes = {
  id: PropTypes.number.isRequired,
  name: PropTypes.string,
  description: PropTypes.string,
  onUpdate: PropTypes.func.isRequired,
};

Спасибо!

1 Ответ

0 голосов
/ 24 мая 2018

Почему, я думаю, потому что первая кнопка не имеет определенного типа, она используется для автоматической отправки.Попробуйте определить эту первую кнопку как type="reset", и я думаю, что это будет сделано.По умолчанию подпорка для кнопок SUIR выглядит как «кнопка», но, похоже, ваш браузер не соблюдает того, что технически должно быть два <button/> тега, визуализированных из этого JSX.

...