Question

我是新手（我的道歉）。我有点卡在这个上。

我正在构建一些带有提交按钮的反应组件，这些按钮可以调用RESTful API。使用有状态组件，这就是我如何阻止“双提交”（在请求处理时基本上改变状态）

class Submitter extends React.Component {

  constructor(props) {
    super(props);
    this.state = { buttonDisabled: false, buttonText: 'Save' };
    this.saveQuestion = this.saveQuestion.bind(this);
  }

  saveToApi() {
    const _this = this;
    this.setState({ buttonDisabled: true, buttonText: 'Saving' });
    request((err, res) => {
      _this.setState({ buttonDisabled: false, buttonText: 'Save' });
    });
  }

  render() {
    return (<div>
      <TextInput />
      <Button 
        disabled={this.state.buttonDisabled} 
        onClick={this.saveToApi}>
      {this.state.buttonText}
      </Button>
    </div>);
  }

}

这很有效。我开始使用react-form进行一些更高级的验证等等。但是，它是一个无状态组件，我不知道如何做到这一点。我没有使用redux，但如果需要，我可以。即使我使用redux，我也不确定如何实现它的一般策略。这是我的工作登录表单，但它不会阻止双重提交。

const LoginForm = Form({
  validate: values => {
    const { email, password } = values;
    return {
      email: (!email || !/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)) ? 'A valid email is required' : undefined,
      password: (!password || password.length < 6) ? 'Passwords must be longer than 6 characters' : undefined,
    };
  },
})(({ submitForm }) => (<form onSubmit={submitForm}>
    <FormTextInput htmlId="email" label="Email Address" />
    <FormTextInput htmlId="password" label="Password" type="password" />
    <Button colored type="raised" htmlType="submit" >Login</Button>
  </form>
  ));

export default () => (
    <LoginForm
      onSubmit={(values) => {
        request((err, res) => {
          if (res.body.login) {
            history.push('/app');
          } else {
            msg.error(res.body.message);
          }
        });
      }}
    />
  );

Answer 1

您想要使用preventDefault功能，如下所示：

_saveToApi(event) {
    event.preventDefault()
    // rest of your code
}

Answer 2

如果我理解正确，您希望阻止默认html提交。

请将您form submit的{{1}}默认包含在event组件中。

LoginForm

防止无状态反应形式的双重提交

2 个答案: