Question

我在使用express提交表单时尝试重定向到React组件。这是我的代码：

Express.js

app.use(bodyParser.urlencoded({extended: true}))

app.use(express.static(publicPath));

app.get('*', (req, res) => {
    res.sendFile(path.join(publicPath, 'index.html'))
})

app.post('/charge', (req, res) => {

    const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)

    stripe.charges.create({
        amount: req.body.totalAmount * 100,
        currency: 'eur',
        source: req.body.stripeToken,
        description: "Example charge",
        receipt_email: req.body.receiptEmail
    }).then((charge) => {
        console.log(req.body)
    }).catch((err) => {
        console.log(err)
    })

CheckoutForm.js

    handleSubmit = (e) => {
            e.preventDefault()

            this.props.stripe.createToken({ name: this.state.name }).then(({ token }) => {
                console.log(token)
                this.stripeTokenHandler(token)
            }) 


        }

        stripeTokenHandler = (token) => {
            const form = document.getElementById('form')

            const hiddenInput = document.createElement('input')
            hiddenInput.setAttribute('type', 'hidden')
            hiddenInput.setAttribute('name', 'stripeToken')
            hiddenInput.setAttribute('value', token.id)

            form.appendChild(hiddenInput)
            form.submit()       
        }

render() {
        return (
            <div className="payment-container">    
                <form id="form" className="checkout-form" onSubmit={this.onSubmit}>

                    <label>
                        Card Number
                        <CardNumberElement
                            onChange={this.onChange}
                            style={{ base: { color: 'white' } }}
                        />
                    </label>
                    <label>
                        Titular Name
                        <input
                            type="text"
                            value={this.state.name}
                            onChange={this.handleText}
                            className="input-text"
                            placeholder="Full Name"
                        />
                    </label>
                    <label>
                        Expiration Date
                        <CardExpiryElement style={{base: {color: 'white'}}} />
                    </label>
                    <label>
                        CVC
                        <CardCVCElement style={{base: {color: 'white'}}} />
                    </label>
                    <label>
                        Email
                        <input
                            type="text"
                            value={this.state.email}
                            onChange={this.handleEmail}
                            className="input-text"
                            name="receiptEmail"
                            placeholder="Email"
                        />
                    </label>
                    <button className="btn-buy">Pay now</button>
                </form>
            </div>
        )}
}

表格正确提交并注册付款。当我提交现在获取请求正文。使用请求表单重定向组件的方法是什么？

Answer 1

如果您点击“立即付款”按钮后，您要查找的内容是重定向的组件，那么我建议您使用React Router将<button>更改为<Link>组件。

看起来像这样

<Link to='/charge' className='btn-buy' onClick={this.formSubmit}>Pay Now</Link>

然后只需从表单中删除this.formSubmit，因为它现在位于按钮上。它将重定向并提交。

如果您想在收到回复后等待重定向，那么在formSubmit功能中，从服务器收到回复后，您可以使用this.props.history.push('/charge')，然后then表单提交者的一部分。

请注意，您需要import { Link } from 'react-router-dom'。

希望它有所帮助！

Answer 2

另一种可以处理此问题的方法是使用React Router中的Redirect组件。像这样：

// in the route, if the post was successful
res.json({data: 'whatever data you want', success: true})
// and if it was unsuccessful
res.json({success: false})

这是一个非常简单的反应组件：

class FormComponent extends Component {
  constructor() {
    super();
    this.state = {
      // inputs or whatever
      success: true,
    }
    this.handleFormSubmit = this.handleFormSubmit.bind(this)
  }

  handleFormSubmit(e) {
    e.preventDefault();
    fetch('send the data', { with: 'some options' })
      .then(res => res.json())
      .then(jsonRes => {
        const { success } = jsonRes;
        this.setState({ success });
      })
      .catch(err => console.log(err))
  }

  // assorted other stuff to handle inputs or whatever

  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          {/* inputs or whatever */}
        </form>
        {this.state.success && <Redirect push to='/some-other-url' />}
      </div>
    )
  }
}

如果this.state.success评估为true，则重定向将呈现;否则，它根本不会。

这允许您在重定向到另一个页面之前确保请求成功。它还允许您向用户提供错误消息，对响应的任何内容执行某些操作等等。可能您需要移动状态等进一步向上移动组件树，以便更多组件可以访问响应数据，如果这是他们需要的东西。

提交表单快递时重定向React组件

2 个答案: