提交后隐藏表单（但在恢复后？）

Question

我很难让这个表单提交两次。 我是什么意思？ 当我单击提交时，表单（在General.js上）被隐藏，它呈现另一个组件（ DisplayGeneral.js ）显示用户的输入。 然后我添加了一个按钮来带回表单，以便用户可以编辑信息，问题是当我单击表单按钮时它不会再次切换，你知道吗？ 我在这里想念什么？ 请，我很感激任何帮助。

General.js

import React, { Component } from 'react';
import '../style/style.css';
import DisplayGeneral from './DisplayGeneral';

class General extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      showing: true,
      isEditing: true,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    const { showing } = this.state;
    this.setState({
      showing: !showing,
    });
  }

  handleClick(e) {
    e.preventDefault();
    const { isEditing } = this.state;
    this.setState({
      isEditing: !isEditing,
    });
  }

  form = () => {
    return (
      <div>
        <form className='generalForm'>
          <label htmlFor='nameInput' className='row'>
            Name:{' '}
            <input
              type='text'
              name='name'
              value={this.state.name}
              onChange={this.handleChange}
              id='nameInput'
            />
          </label>
          <button onClick={this.handleSubmit}>Submit</button>
        </form>
      </div>
    );
  };

  renderGeneral() {
    const {
      isEditing,
      name,
    } = this.state;
    return (
      <div>
        {isEditing ? (
          <div>
            <DisplayGeneral
              handleSubmit={this.handleSubmit}
              name={name}

            />
            <button onClick={this.handleClick}>Edit</button> // button added
          </div>
        ) : (
          this.form()
        )}
      </div>
    );
  }

  render() {
    const { showing } = this.state;

    return (
      <section className='divGeneral'>
        <div className='sectionTitle'>
          <h1>General Information</h1>
        </div>
        {showing ? this.form() : this.renderGeneral()}
      </section>
    );
  }
}

export default General;

DisplayGeneral.js

import React, { Component } from 'react';

class DisplayGeneral extends Component {
  render() {
    const { name } = this.props;

    return (
      <section className='renderedSection'>
        <article>
          <span className='spanArtc'>Name: </span>
          {name}
        </article>
      </section>
    );
  }
}

export default DisplayGeneral;

Answer 1

如果您只想切换表单，您可以只保留一个标志isEditing并将其更改为 true，如果您想显示表单，则将其更改为 false 以显示信息。

import React, { Component } from 'react';
import '../style/style.css';
import DisplayGeneral from './DisplayGeneral';

class General extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      isEditing: true,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    this.setState({
      isEditing: false,
    });
  }

  handleClick(e) {
    e.preventDefault();
    this.setState({
      isEditing: true,
    });
  }

  form = () => {
    return (
      <div>
        <form className='generalForm'>
          <label htmlFor='nameInput' className='row'>
            Name:{' '}
            <input
              type='text'
              name='name'
              value={this.state.name}
              onChange={this.handleChange}
              id='nameInput'
            />
          </label>
          <button onClick={this.handleSubmit}>Submit</button>
        </form>
      </div>
    );
  };

  renderGeneral() {
    const { name } = this.state;
    return (
      <div>
        <DisplayGeneral handleSubmit={this.handleSubmit} name={name} />
        <button onClick={this.handleClick}>Edit</button> // button added
      </div>
    );
  }

  render() {
    const { isEditing } = this.state;

    return (
      <section className='divGeneral'>
        <div className='sectionTitle'>
          <h1>General Information</h1>
        </div>
        {isEditing ? this.form() : this.renderGeneral()}
      </section>
    );
  }
}

export default General;