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>
    );
}

render（）{
返回(
选项1-1
选项1-2
选项2-1
选项2-2
选择2-3
选项3-1
选项3-2
);
}

---

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

您应该为您的

单选输入提供
值和
onChange
道具

<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>



然后，您可以将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);
    });
}

现在可以从任何地方调用此函数，如单击submit按钮

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

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
类型状态：“”，
操作状态：“”，
注册状态：“”，
};
}
//handleStateClick=（）=>
render（）{
返回(
this.setState（{TypeStatus:“TypeStatus clicked”}，console.log（this.state.TypeStatus））}>TypeStatus
this.setState（{OperatingStatus:“OperatingStatus clicked”}，console.log（this.state.OperatingStatus））}>OperatingStatus
this.setState（{RegistrationStatus:“RegistrationStatus clicked”}，console.log（this.state.RegistrationStatus））}>RegistrationStatus
);
}
}
render（，document.getElementById（'root'））；

https://stackblitz.com/edit/react-ahytle?file=index.js
你好，mohsen，请检查我的解决方案，并让我知道这是否有帮助。非常感谢。如果我想将任何按钮添加到该类的标签上，我该怎么办？您能解释更多吗？单击按钮时，状态会发生变化，这非常好，它里面有一个输入和一个标签。我想在label中添加一个类。您可以在状态中维护该类，然后将其动态分配给label。在其上构建演示非常棒，非常感谢您的帮助。
<button onClick={this.callAPI}>Submit</button>

componentDidMount(){
   this.callAPI();
}

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      TypeStatus: '',
      OperatingStatus: '',
      RegistrationStatus: '',
    };
  }

  // handleStateClick = () =>

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ TypeStatus: " TypeStatus clicked" }, console.log(this.state.TypeStatus))}>TypeStatus</button>
        <button onClick={() => this.setState({ OperatingStatus: " OperatingStatus clicked" }, console.log(this.state.OperatingStatus))}>OperatingStatus</button>
        <button onClick={() => this.setState({ RegistrationStatus: " RegistrationStatus clicked" }, console.log(this.state.RegistrationStatus))}>RegistrationStatus</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));