Связывание и сохранение значения кнопки реакции

Question

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

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

class CustomizedButtons extends React.Component {
    constructor(props) {
        super(props);

    this.state = {

        apiUrl:config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,

        category: " ",
    };
    }
    saveValue = () => {
        console.log('savecategory');


        axios.post( this.state.apiUrl+'/api/v1/leadsurvey/category', {
            'categoryName':this.state.category,

        }, {})

    };


    render() {
        const { classes} = this.props;

        return (
            <div>

                <div>
                    <p>What is the type of your property?</p>

                    <div>

                        <button onClick={() => this.saveValue()}>Residence</button>
                        <button onClick={() => this.saveValue()}>Commercial</button>
                    </div>
                    <div style={{marginTop: '90px'}}>
                    </div>
                </div>
            </div>
        );
    }
}


export default CustomizedButtons;

Я не понимаю, как заставить работать привязку и сохранение. В случае сохранения значения формы я сделал что-то подобное.

this.state = {
    apiUrl:config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
    FreeQuoteName :"",
};

this.handleFreeQuoteName = this.handleFreeQuoteName.bind(this);

saveFreeQuote = () => {
    console.log('saveFreeQuote ...', this.state);

    axios.post( this.state.apiUrl+'/api/v1/SalesLead/save', {
        'name': this.state.FreeQuoteName,
    }
}



handleFreeQuoteName(event) {  this.setState({ FreeQuoteName: event.target.value });    }
<Form>
    <p>Name*</p>
    <input maxLength="30" onChange={this.handleFreeQuoteName} value={this.state.FreeQuoteName}
           type="text" placeholder="Enter name here"/>

    <div style={{textAlign:'center', marginTop:'35px', marginBottom:'22px'}} className={card.disable}>
        <button disabled={isDisabled} type="button" fullwidth="true" variant="contained"
                onClick={() => this.saveFreeQuote()} style={{padding: '9px 0px'}}>Submit</button>

</Form>

Я хочу сделать то же самое для кнопки значения. Если я нажму кнопку, она сохранит значение в виде строки и перенаправит на другую страницу. Как я могу это сделать?

Answer 1

из вашего поста Я предположил, что вы хотите сохранить значение кнопки в состоянии, а также хотите инициировать запрос axios при нажатии кнопки.

попробуйте изменить, как показано ниже

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import axios from 'axios';

class CustomizedButtons extends React.Component {
    constructor(props) {
        super(props);

    this.state = {

        apiUrl:config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,

        category: "",
    };
    }

    saveValue = (e) => {
        console.log('savecategory', e.target.innerHTML);

        this.setState({
            category: e.target.innerHTML
        }, this.makeAxiosRequest);

    };

    makeAxiosRequest = () => {
        axios.post( this.state.apiUrl+'/api/v1/leadsurvey/category', {
            'categoryName':this.state.category,
        }, {})
    };

    render() {
        const { classes} = this.props;

        return (
            <div>

                <div>
                    <p>What is the type of your property?</p>

                    <div>

                        <button onClick={this.saveValue}>Residence</button>
                        <button onClick={this.saveValue}>Commercial</button>
                    </div>
                    <div style={{marginTop: '90px'}}>
                    </div>
                </div>
            </div>
        );
    }
}


export default CustomizedButtons;

здесьЯ использую функцию обратного вызова внутри setState () , чтобы инициировать запрос axios после сохранения значения кнопки в состоянии.

Надеюсь, это поможет.