Question

我试图弄清楚如何在单击＆＃34;立即购买时使用单选按钮从表单中提取数据＆＃34;按钮。我知道在反应中你可以获取值并设置状态，但我试图使用ajax调用，而我不是100％如何设置它。我尝试按照axios github页面，但我更困惑。我错过了依赖，因为这是我的错误消息所说的。如果有人能够清楚这是如何建立的那将是伟大的！

这是我的错误消息：

这是我的点击功能所在的App.js：

import React, { Component } from "react";
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import axios from "axios";
import eyewearData from "./data/eyewear.json";
import Header from "./components/Header";
import EyewearContent from "./components/EyewearContent";
import Buy from "./components/Buy";
import SelectEyewearPage from "./components/SelectEyewearPage";
import './App.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
      eyewearData: eyewearData,
      img: {},
      title: "",
      name: "",
      price: "",
      description: "",
      sizes: [],
      purchaseVal: "",
      redirect: false
    }
    this.handleClick = this.handleClick.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      purchaseVal: e.target.value
    });
  }

  handleSubmit(e) {
    e.preventDefault();

    const purchaseVal = {
      purchaseVal: this.state.purchaseVal
    };

    axios.post("/selecteyewear", 
      { purchaseVal }).then(function (response) {
      console.log(response);
    }).catch(function (error) {
      console.log(error.request);
      console.log(error.message);
    });
  };

  handleClick(data) {
    this.state.eyewearData.eyewear.filter( eyewear => {
      console.log(eyewear.id === data.target.getAttribute("data-id") && this.setState({
        img: eyewear.images,
        title: eyewear.brand,
        name: eyewear.name,
        price: eyewear.price,
        description: eyewear.description,
        sizes: eyewear.sizes
      }))
    })
  };

  render() {
    return (
      <BrowserRouter>
        <div>
          <Header />
                <Route exact path="/" render={() => <EyewearContent 
            eyewearData={this.state.eyewearData} 
            handleClick={this.handleClick} 
            img={this.state.img}
            title={this.state.title} 
            name={this.state.name}
            price={this.state.price}
            description={this.state.description}
            sizes={this.state.sizes}
            handlePurchaseEvent={this.handlePurchaseEvent} />} />
                <Route exact path="/buy" component={Buy} />
            </div>
        </BrowserRouter>
    );
  }
}

export default App;

以下是我的表单所在的文件：

import React from "react";

const EyewearPurchaseBtn = (props) => (
    <div>
        <form className="eyewear-purchase-form" onSubmit={props.handleSubmit}>
            <h3>Select Size</h3>

                    {
                        props.sizes.map( size => (
                            <div key={size} >
                            <input onChange={props.handleChange} className="radio-btn" type="radio" name="purchaseVal" value={size} />
                            <label className="eyewear-purchase-label">{size}</label><br/>   
                            </div>
                        ))
                    }

                    <button className="buy-now">Buy Now</button>    
                </form>
    </div>
);

export default EyewearPurchaseBtn;

Answer 1

您需要在导入语句中提供axios的完整路径

import axios from 'axios';

P.S。只是通过npm / yarn重新安装axios，如果它还在抛出错误

点击＆＃34;立即购买＆＃34;按钮，ajax帖子应该将数据发送到路由＆＃34; / buy＆＃34;

1 个答案: