Question

我试图将按钮的值保存为字符串。如果我单击驻留按钮，它将把类别名称中的值保存为'residence'或'commercial'并重定向到另一个页面。后端将值绑定并保存到数据库中。代码是这样的

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请求。

希望这会有所帮助。

绑定并保存反应按钮值

1 个答案: