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

您想要这样的东西：

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

class App extends React.Component {
  state = {
    val: ""
  };

  handleSubmit = e => {
    e.preventDefault();
    axios
      .get(
        `https://jsonplaceholder.typicode.com/comments?postId=${this.state.val}`
      )
      .then(response => {
        console.log("FOUND", response);
      })
      .catch(err => {
        console.log("NOT FOUND", err);
      });
  };
  render() {
    return (
      <div className="App">
        <div>
          <form onSubmit={this.handleSubmit}>
            <label>Enter a price</label>
            <input
              name="PriceCap"
              type="number"
              min="1"
              max="20"
              onChange={e => this.setState({ val: e.target.value })}
            />
            <button>Generate Suggestions</button>
          </form>
        </div>
      </div>
    );
  }
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作示例here。

在这里，您将输入值存储在状态中，然后在您的get()调用中使用它。

请注意，我们在state中添加了onChange和input。

Answer 2

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

<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(...)
}

使用React和Axios进行简单的表单传输

2 个答案: