Question

我正在重新设计我的专业作品集（最近的训练营毕业生），并且在设置联系人提交表单成功消息时遇到问题。过去几天，我一直在到处寻找，似乎找不到一个好的方向。我希望这里的某个人可以给我指示，或者平淡地告诉我我做错了什么。

谢谢

将formSuccess设置为状态（初始值为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

嘿，欢迎来到Web开发人员的狂野世界，并恭喜您完成了训练营。

您的方法似乎很像执行此操作的正确方法，但是您实际上并没有使用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的{{3}}实际运行中进行检查。

展望未来，您应该阅读here，以了解有关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>
    );

尝试使用此代码，并确保您的按钮的类型是从语义UI反应中提交的。

我正在尝试设置表单的成功状态

2 个答案: