我有一个带有 2 个选项的选择下拉菜单和一个带有 2 个值的单选按钮。(参考下面的代码)加载页面时,“象限 1”是默认选择选项,默认情况下不会选择任何单选按钮。
对于选择选项的“象限 1”,我将在单选按钮中选择“否”。对于选择选项的“象限2”,我将选择“是”。这些值相应地存储在“网格”状态中。每当进行更改时,我都能够成功捕获这些状态的更新。
但是当我在选择选项之间切换时,单选按钮没有相应地改变。我知道每当更改选择选项时,我都必须更新单选按钮的“已检查”属性。但我无法做到这一点。如果我错了,请原谅我,因为我是 ReactJS 的新手并且在过去的 1 周里碰到了我的脑袋。
只要更改选择选项时,请帮助我更新单选按钮。
Updated RuleScreen.js:
[Correct Grid State details but radio button not updated][1]
import React, { Component } from "react";
import M from "materialize-css";
import dropDownList from "./dropDown";
import _ from "lodash";
class RuleScreen extends Component {
constructor(props){
super(props);
this.state = {
quad: "Q1",
grid: [{id:"Q1", optin:"",NL:""}, {id:"Q2", optin:"", NL:""}]
};
}
componentDidMount() {
var elems = document.querySelectorAll('select');
M.FormSelect.init(elems, {hover: true, coverTrigger: false});
}
quadChange = async (e) => {
await this.setState({ quad:e.target.value});
}
optinChange = async (e) => {
const currQuad = this.state.quad;
const value = e.target.value;
await this.setState(prevState => ({
grid: prevState.grid.map(
item => item.id === currQuad? { ...item, optin: value}: item
)
}))
}
render() {
const selectedGrid = this.state.grid.filter(quad=>quad.id === this.state.quad)
return (
<div>
<h3>Rule Setup</h3>
<div className="container">
<div className="btn">
<select required value={this.state.quad} onChange={this.quadChange}>
<option key="Q1" value="Q1">Quadrant 1</option>
<option key="Q2" value="Q2">Quadrant 2</option>
</select>
</div>
<form>
<label>Opt In</label>
<label><input id="yes" checked={selectedGrid[0].optin=== 'yes' } onChange={this.optinChange} value="yes" className="with-gap" name="optin" type="radio"/>
<span>Yes</span>
</label>
<label><input id="no" checked={selectedGrid[0].optin=== 'no' } onChange={this.optinChange} value="no" className="with-gap" name="optin" type="radio"/>
<span>No</span>
</label>
</form>
</div>
</div>
);
}
}
export default RuleScreen;