时间戳

首页 > 解决方案 > 如何使用单选按钮更改此状态

reactjs - 如何使用单选按钮更改此状态

问题描述

我有几个可选按钮，我想通过选择这些状态单选按钮中的任何一个来更改这些状态​​单选按钮，我想将其用作参数以将信息发送到 api

import React ,{Component} from 'react';
import axios from "axios/index";

export default class Test extends Component {

    constructor(props) {
        super(props);
        this.state = {
            TypeStatus: '',
            OperatingStatus: '',
            RegistrationStatus: '',
        }
    }

这是我的 axios 代码

componentDidMount(){
    axios({
        method: 'post',
        url: 'https://test.ir/api/registerANewAdd',
        data: {
            TypeStatus: '',
            OperatingStatus: '',
            RegistrationStatus: '',
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
}

这是我的按钮

render() {
    return (
        <div className="container-fluid">
            <div className="row RegisterOptions">
                <div className="col" data-toggle="buttons">
                    <label className="RegisterButtons">
                        <input type="radio" name="TypeStatus" id="Justice" />
                        options1-1
                    </label>
                </div>
                <div className="col" data-toggle="buttons">
                    <label className="RegisterButtons">
                        <input type="radio" name="TypeStatus" id="Credit" />
                        options1-2
                    </label>
                </div>
            </div>
            <div className="row RegisterOptions">
                <div className="col" data-toggle="buttons">
                    <label className="RegisterButtons">
                        <input type="radio" name="OperatingStatus" id="New" />
                        options2-1
                    </label>
                </div>
                <div className="col" data-toggle="buttons">
                    <label className="RegisterButtons">
                        <input type="radio" name="OperatingStatus" id="LowPerformance" />
                        options2-2
                    </label>
                </div>
                <div className="col" data-toggle="buttons">
                    <label className="RegisterButtons">
                        <input type="radio" name="OperatingStatus" id="Old" />
                        options2-3
                    </label>
                </div>
            </div>
            <div className="row RegisterOptions">
                <div className="col" data-toggle="buttons">
                    <label className="RegisterButtons">
                        <input type="radio" name="RegistrationStatus" id="Unregistered" autoComplete="off" />
                        options3-1
                    </label>
                </div>
                <div className="col" data-toggle="buttons">
                    <label className="RegisterButtons">
                        <input type="radio" name="RegistrationStatus" id="Registered" />
                        options3-2
                    </label>
                </div>
            </div>
        </div>
    );
}

请帮忙。我想单击这些按钮中的任何一个来将一个类添加到它的标签中，而这些组中的每一个都只是一个选项。

标签： reactjsradio-buttonstate

解决方案

您应该为您的输入提供valueandonChange道具。radio

<div className="row RegisterOptions">
    <div className="col" data-toggle="buttons">
        <label className="RegisterButtons">
            <input type="radio" name="TypeStatus" id="Justice" value="Justice" onChange={this.changeHandle}/>
            options1-1
        </label>
    </div>
    <div className="col" data-toggle="buttons">
        <label className="RegisterButtons">
            <input type="radio" name="TypeStatus" id="Credit" value="Credit" onChange={this.changeHandle}/>
            options1-2
        </label>
    </div>
</div>

在这里，您的值将根据无线电输入而变化，但changeHandle对于所有无线电输入将保持不变。

你的changeHandle应该是这样

changeHandle = (e) => {
   this.setState({
     [e.target.name]: e.target.value
   })
}

演示

然后，您可以使用 state 中的值进行axios调用。您应该为您的 API 调用创建一个单独的函数

callAPI = () => {
    axios({
        method: 'post',
        url: 'https://test.ir/api/registerANewAdd',
        data: {
            TypeStatus: this.state.TypeStatus,
            OperatingStatus: this.state.OperatingStatus,
            RegistrationStatus: this.state.RegistrationStatus,
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
}

现在可以从任何地方调用这个函数，比如点击提交按钮，

<button onClick={this.callAPI}>Submit</button>

或从componentDidMount,

componentDidMount(){
   this.callAPI();
}

推荐阅读