我正在尝试建立一个表单的成功状态

Question

我正在重新设计我的职业投资组合（最近的训练营毕业），我在设置联系人提交表单成功消息方面遇到了问题。过去几天我一直在寻找各处，似乎无法找到一个好的方向。我希望有人在这里可以给我那个方向，或者只是告诉我我做错了什么。

• 谢谢

设置formSuccess in state（初始值为false），并在提交时将其更改为true。谷歌搜索了其他解决方案，其他解决方案的视频，但在这方面没有太多。

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

嘿欢迎来到web dev的狂野世界，并祝贺你完成训练营。

你的方法看起来非常像正确的方法，但你实际上并没有使用你的handleSubmit所以什么都不会发生。我不确定你是否只是省略了它。你提到你没有显示你的所有代码，所以可能缺少某些东西。您应该将以下内容附加到您的<Form />

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

...

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

// rest of your code/component

你可以在here的example.js行动中查看它。

展望未来，您应该阅读this关于在StackOverflow上提问的问题，以便人们可以更快，更轻松地帮助您。您的问题越容易理解，您将获得更好的帮助。

Answer 2

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>
    );

尝试使用此代码，并确保您的按钮是semantic-ui-react提交的类型。