如何将基于类的单选按钮组更改为基于功能的单选按钮组答案

【问题标题】：how can i change class based radio button group to functional based radio group如何将基于类的单选按钮组更改为基于功能的单选按钮组
【发布时间】：2021-02-23 02:53:23
【问题描述】：

这是基于类的广播组。我想将其转换为基于功能的无线电组。我该怎么做。代码如下：

import React, { Component } from "react";

class Demo2 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
    this.onValueChange = this.onValueChange.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  onValueChange(event) {
    this.setState({
      selectedOption: event.target.value
    });
  }

  formSubmit(event) {
    event.preventDefault();
    console.log(this.state.selectedOption)
  }

  render() {
    return (
      <form onSubmit={this.formSubmit}>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Male"
              checked={this.state.selectedOption === "Male"}
              onChange={this.onValueChange}
            />
            Male
          </label>
        </div>
        <div className="radio">
          <label>
            <input
              type="radio"
              value="Female"
              checked={this.state.selectedOption === "Female"}
              onChange={this.onValueChange}
            />
            Female
          </label>
        </div>

我希望它为基于功能的组件工作代码。我是新手，请帮忙。

【问题讨论】：

好的，当你把它变成功能组件时你遇到了什么问题？

标签： reactjs radio-group

【解决方案1】：

使用React.useState 创建本地状态，并根据更新后的状态更改模板。

*注意：- 功能组件不需要this 运算符。也可以直接返回模板（不需要渲染方法）

示例代码：

import React, { useState } from "react";
import "./styles.css";

export default function Demo2() {
  const [selectedOption, setSelectedOption] = useState("Male");

  const onValueChange = (event) => {
    setSelectedOption(event.target.value);
  };

  const formSubmit = (event) => {
    event.preventDefault();
    console.log(selectedOption);
  };

  return (
    <form onSubmit={formSubmit}>
      <div className="radio">
        <label>
          <input
            type="radio"
            value="Male"
            checked={selectedOption === "Male"}
            onChange={onValueChange}
          />
          Male
        </label>
      </div>
      <div className="radio">
        <label>
          <input
            type="radio"
            value="Female"
            checked={selectedOption === "Female"}
            onChange={onValueChange}
          />
          Female
        </label>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
}

工作代码 - https://codesandbox.io/s/bold-platform-yr3l9?file=/src/App.js:0-1001

【讨论】：

【解决方案2】：

import React, { useState } from "react";

function Demo2() {
  const [checked, setChecked] = useState("Male");

  const onValueChange = (event) => {
    setChecked(event.target.value);
  };

  const formSubmit = (event) => {
    event.preventDefault();
    console.log(checked);
  };

  return (
    <form onSubmit={formSubmit}>
      <div className="radio">
        <label>
          <input
            type="radio"
            value="Male"
            checked={checked === "Male"}
            onChange={onValueChange}
          />
          Male
        </label>
      </div>
      <div className="radio">
        <label>
          <input
            type="radio"
            value="Female"
            checked={checked === "Female"}
            onChange={onValueChange}
          />
          Female
        </label>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
}

【讨论】：