reactjs - 如何将基于类的单选按钮组更改为基于功能的单选按钮组
问题描述
这是基于类的广播组。我想将其转换为基于功能的无线电组。我该怎么做。代码如下:
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>
我希望它为基于功能的组件工作代码。我是新手,请帮忙。
解决方案
使用更新的状态创建本地状态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
推荐阅读
- java - 如何使用cardview和适配器将按钮添加到recyclerview布局中?
- javascript - 将数据从页面发送到 chrome 扩展
- c# - AWS Lambda - C# - 环境变量只加载空
- python - 在张量流中加载现有模型时出现问题
- python - ZMQ 上下文套接字在新计算机上的创建速度要慢得多
- javascript - Safari 手机上看不到汉堡菜单
- karate - 空手道 API:从其他文件夹调用功能文件时找不到文件异常
- time - 在线性时间内查找未排序列表的前 log n 个元素
- cypress - 让赛普拉斯与 StencilJS 组件配合使用时出现问题
- swift - 如果语句在 Swift 4 中的行为不符合预期