如何解决基于React中“选择”选项的更改,单选按钮未正确更新
我有一个带有2个选项的Select下拉列表和一个具有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",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;
解决方法
由于使用数组函数,因此不必将函数绑定到“ this”。 我没有测试代码,但是想法就在这里。 将值添加到单选按钮,删除值的获取器,在渲染器的网格中添加选择器
class RuleScreen extends Component {
constructor(props){
super(props);
this.state = {
quad: "Q1",grid: [{id:"Q1",optin:"",NL:""},{id:"Q2",NL:""}]
};
}
componentDidMount() {
var elems = document.querySelectorAll('select');
M.FormSelect.init(elems,{hover: true,coverTrigger: false});
}
quadChange = (e) => {
this.setState({ quad:e.target.value});
}
optinChange = (e) => {
const currQuad = this.state.quad;
const value = e.target.value;
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) //maybe with [0] at the end
return (
<div>
<h3>App Name</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>
<div>Opt In</div>
<label>
<input id="yes" checked={selectedGrid.optin === 'yes'} onChange={this.optinChange} value="yes" className="with-gap" name="optin" type="radio"/>
<span>Yes</span>
</label>
<label>
<input id="no" checked={selectedGrid.optin === 'no'} onChange={this.optinChange} value="no" className="with-gap" name="optin" type="radio"/>
<span>No</span>
</label>
</form>
</div>
)
}
}
export default RuleScreen;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。