javascript - 使用 React 和 axios 进行简单的表单传输

Question

我有一个使用 reactjs 呈现的简单表单，我想从表单传递一个参数来完成到测试端点的路由。

这是端点:https://jsonplaceholder.typicode.com/comments?postId=1

这是组件:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios'
import MenuCombo from './menucombo'
const heading = "Enter a price cap here for recommendations"

class App extends Component {
    handleSubmit = (e) => {
        e.preventDefault()
        axios.get('https://jsonplaceholder.typicode.com/comments?postId=PriceCap')
            .then(response  =>{
                console.log("FOUND", response)
            })
            .catch(err => {
                console.log("NOT FOUND",err)
            })
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">{heading}</h1>
                </header>
                <div>
                    <form onSubmit={this.handleSubmit}>
                        <label>Enter a price</label>
                        <input  name = 'PriceCap'
                                    type = 'number'
                                    min = '1'
                                    max  ='20'/>
                        <button>Generate Suggestions</button>
                    </form>
                </div>
            </div>
        );
    }
}

export default App;

如您所见，我传递了名为 PriceCap 的表单元素，理想情况下，用户会将其设置为 1 以记录数据。如果将其设置为 1 以外的任何其他值，则会记录错误。但我似乎无法让参数正确传递。

我觉得使用 POST 会更容易，但我也觉得 POST 太过分了，因为我只发送一个参数。

Answer 1

通过以下方式设置对您的输入的引用

<input  
    name = 'PriceCap'
    ref = {node => {this.input = node}}
    type = 'number'
    min  = '1'
    max  ='20'
/>

然后您可以通过

访问提交处理程序中的值

handleSubmit = event => {
    let PriceCap = this.input.value;
    axios.get(`https://jsonplaceholder.typicode.com/comments?postId=${PriceCap}`)
        .then(...).catch(...)
}