сохранить значение ползунка диапазона в состоянии и инициировать запрос axios при нажатии кнопки - PullRequest
Новая
       15

сохранить значение ползунка диапазона в состоянии и инициировать запрос axios при нажатии кнопки

0 голосов
/ 16 мая 2019

Я пытаюсь сохранить значение Range-slider. Если я нажму «NEXT», я хочу, чтобы оно сохранило значение в переменной «Squarefeet» и перенаправило на другую страницу. Я встроил Rest API в бэкэнд для привязки и сохранениязначение в базе данных. Код выглядит примерно так: 

import React, { Component } from 'react'
import Slider from 'react-rangeslider'
import Link from "next/link";
import axios from "axios";
import getConfig from "next/config";
const config = getConfig();

class Horizontal extends Component {
    constructor (props, context) {
        super(props, context)
        this.state = {
            apiUrl:config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
        }
    }
    handleChangeStart = () => {
        console.log('Change event started')
    };
    handleChange = value => {
        this.setState({
            value: value
        })};

    handleChangeComplete = () => {
        console.log('Change event completed')
    };
    saveValue = () => {
        console.log('saveValue ...', this.state);

        axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
            'squareFeet':this.state.value,

        },  {}  )
    };

    render () {
        const { value } = this.state
        return (
            <div>

                <div className='slider'  style={{ marginTop:'165px',marginLeft:'319px',width:'700px',backgroundColor:'EF5350'}} >

                    <Slider min={850} max={5000} value={value} onChangeStart={this.handleChangeStart}
                        onChange={this.handleChange}
                        onChangeComplete={this.handleChangeComplete}
                    />
                    <div className='value'>{value} Squarefeet</div>
                    <div style={{marginTop:'86px'}}>
                        <Link prefetch href="/estimate"><a href="#" >


                            <span onChange={this.handleChange} onClick={() => this.saveValue()} >Next</span></a></Link>

                    </div>

                </div>
            </div>
        )
    }
}

export default Horizontal

Я не понимаю, как заставить его работать, связывать и сохранять. Как мне это сделать?

...