Я пытаюсь настроить состояние успеха формы

Question

Я переделываю свое профессиональное портфолио (недавний выпускник bootcamp), и у меня возникают проблемы с настройкой сообщения об успешном заполнении формы отправки контакта.Последние несколько дней я искал повсюду, и, похоже, не могу найти в этом правильного направления.Я надеялся, что кто-то здесь может дать мне это направление или просто сказать мне, что я делаю неправильно.

• Спасибо

, установив formSuccess в состоянии (init value false) и изменив его на true при отправке.Google искал другие решения, видео о других решениях, но там не так уж много.

class FormWrapper extends Component {
  constructor() {
    super();
    this.state = {
      firstName: "",
      lastName: "",
      email: "",
      phoneNumber: "",
      comments: "",
      formSuccess: false
    };
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  render() {
    return (
      <React.Fragment>
        <Form ["success" prop goes here as "success"]>
          <Message
            success
            header="E-mail has been sent"
            content="Please give me a few business to reply!"
          />
          <Button color="teal">
            {" "}
            <Icon.Group size="large">
              <Icon name="paper plane" />
            </Icon.Group>
            Submit
          </Button>
        </Form>
      </React.Fragment>
    );

• не полный файл

Answer 1

class FormWrapper extends Component {
  constructor() {
    super();
    this.state = {
      firstName: "",
      lastName: "",
      email: "",
      phoneNumber: "",
      comments: "",
      formSuccess: false
    };
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  _formSubmit = (e) => {
    e.preventDefault
    this.setState({formSuccess:true});
    //call other methods or api after this or in setState callback
  }

  render() {
    return (
      <React.Fragment>
        <Form onSubmit={this._formSubmit}>
          <Message
            success
            header="E-mail has been sent"
            content="Please give me a few business to reply!"
          />
          <Button  color="teal">
            {" "}
            <Icon.Group size="large">
              <Icon name="paper plane" />
            </Icon.Group>
            Submit
          </Button>
        </Form>
      </React.Fragment>
    );

Попробуйте использовать этот код, а также убедитесь, что ваша кнопка имеет тип submit от semantic-ui-реагировать.

Answer 2

Привет, добро пожаловать в дикий мир веб-разработчиков и поздравляю с завершением вашего буткемпа.

Ваш подход выглядит почти как правильный способ сделать это, но вы на самом деле не используете свой handleSubmit, поэтому ничего не произойдет. Я не уверен, что вы только что пропустили это. Вы упомянули, что не показывает весь свой код, поэтому, возможно, чего-то не хватает. Вы должны приложить следующее к вашему <Form />

handleSubmit(e) {
  e.preventDefault();
  this.setState({
    formSuccess: true,
  });
}

...

<Form
  onSubmit={this.handleSubmit}
  success={this.state.formSuccess}
>

// rest of your code/component

Вы можете проверить это, работая в действии здесь в example.js.

В дальнейшем вам следует прочитать этот о том, как задавать вопросы в StackOverflow, чтобы люди могли помочь вам быстрее и проще. Чем легче понять вашу проблему, тем лучше вы получите помощь.