Question

我在Form中的页脚中有一个带有输入字段，TextArea和两（2）个按钮的表单。第一个按钮用于重置表单，第二个按钮用于更新表单。我的问题是当我在输入字段中按“输入”时，表单已提交，但似乎它总是触发第一个按钮的逻辑（在我的情况下重置表单）。如果我切换按钮的顺序以便首先使用“更新”按钮，则在按“输入”时更新表单。只有更新按钮具有“提交”类型。

我查看了文档，找不到有关此行为的任何内容。我还检查了一点源代码，但没有看到可能导致这种情况的原因。我尝试将Form的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,
};

谢谢！

Answer 1

为什么，我认为因为第一个按钮没有定义类型，它被用于自动提交。尝试将第一个按钮定义为type="reset"，我认为会这样做。 SUIR按钮的默认道具似乎是＆＃34;按钮＆＃34;但是你的浏览器似乎没有尊重这个技术上应该从这个JSX渲染两个<button/>标签。

Semantic-ui-react输入字段自动提交触发错误行为

1 个答案: