javascript - 带有单选按钮的 React 组件重新呈现将值设置回 null
问题描述
我正在呈现一个问卷页面,该页面显示了一个具有以下属性的问题组件;问题编号、问题文本和 5 个单选按钮,每个按钮都有答案。
我想要实现的是当用户单击单选按钮时,我会在状态中存储答案和问题编号。
我遇到了一个问题,一旦我的组件呈现并单击答案,它似乎会重新呈现,而我选择的单选按钮似乎没有被单击。
这是我嵌入问题组件的问卷页面
const Questionaire = (props) => {
const [answers, set_answers] = useState({});
console.log("Inside Questionaire component", answers);
const onChangeAnswerFunc = (answer, match) => {
set_answers({ ...answers, [match.params.questionNumber]: answer });
};
return (
<div className="quiz">
<Route
path="/dashboard/questions/:questionNumber"
component={({ match }) => (
<Question
questionNumber={match.params.questionNumber}
answerFunc={(e) => onChangeAnswerFunc(e, match)}
/>
)}
/>
</div>
);
};
export default Questionaire;
这是我的问题部分
const Question = ({ omat, pmat, cmat, questionNumber, answerFunc }) => {
const [currentRadioValue, setRadioValue] = useState(null);
useEffect(() => {
if (currentRadioValue != null) {
answerFunc(currentRadioValue);
console.log("Inside useEffect");
}
}, [currentRadioValue, answerFunc]);
const onChange = (e) => {
setRadioValue(e.target.value);
// handleChange();
// console.log("onChange");
};
console.log("Under on change", currentRadioValue);
const handleChange = () => {
answerFunc(currentRadioValue);
};
// console.log(currentRadioValue);
const onSubmit = async (e) => {
e.preventDefault();
};
if (!omat) return null;
const question = omat[questionNumber];
const {
question: text,
section,
subject,
score0,
score25,
score50,
score75,
score100,
} = question;
const anyQuestion = (
<Link to={`/dashboard/questions/${Number(questionNumber) + 1}`}>Next</Link>
);
const finalQuestion = <button>Submit</button>;
const previousQuestion = (
<Link to={`/dashboard/questions/${Number(questionNumber) - 1}`}>
Previous
</Link>
);
return (
<div>
<div className="questions">
<h2 className="lead">Question number: {questionNumber} / 40 </h2>
<p className="question-section">Section: {section}</p>
<p className="question-subject">Subject: {subject}</p>
<div>{text}</div>
<form className="form" onSubmit={(e) => onSubmit(e)}>
<div className="form-group">
<>
<input
type="radio"
name={`Radio`}
value="Radio - 1"
checked={currentRadioValue === `Radio - 1`}
onChange={(e) => onChange(e)}
/>
<label> - {score0}</label>
</>
</div>
<div className="form-group">
<>
<input
type="radio"
name={`Radio`}
value="Radio - 2"
checked={currentRadioValue === `Radio - 2`}
onChange={(e) => onChange(e)}
/>
<label> - {score25}</label>
</>
</div>
<div className="form-group">
<>
<input
type="radio"
name={`Radio`}
value="Radio - 3"
checked={currentRadioValue === `Radio - 3`}
onChange={(e) => onChange(e)}
/>
<label> - {score50}</label>
</>
</div>
<div className="form-group">
<>
<input
type="radio"
name={`Radio`}
value="Radio - 4"
checked={currentRadioValue === `Radio - 4`}
onChange={(e) => onChange(e)}
/>
<label> - {score75}</label>
</>
</div>
<div className="form-group">
<>
<input
type="radio"
name={`Radio`}
value="Radio - 5"
checked={currentRadioValue === `Radio - 5`}
onChange={(e) => onChange(e)}
/>{" "}
<label> - {score100}</label>
</>
</div>
</form>
</div>
{Number(questionNumber) > 0 ? previousQuestion : null}
{Number(questionNumber) !== 5 ? anyQuestion : finalQuestion}
<Link to={`/`}>Exit</Link>
</div>
);
};
const mapStateToProps = (state) => ({
auth: state.auth,
omat: state.questions.omat,
pmat: state.questions.pmat,
cmat: state.questions.cmat,
});
export default connect(mapStateToProps)(Question);
如果我从 onChange 中禁用handleChange功能,则单选按钮将正确显示(选中),并且不加注释的 handleChange 传递的值再次返回为 null。
我将附上一个控制台日志,这可能会有所帮助。
这是前端渲染的图片
提前致谢!
解决方案
使用shouldComponentUpdate
生命周期方法来防止不必要的渲染,默认情况下组件在状态更改时重新渲染。
推荐阅读
- vba - 如何仅在 VBA Access 中捕获 vbKeyReturn
- dart - 如何在列表视图中展开一列以覆盖导航抽屉中屏幕的所有剩余空间
- netlogo - 循环列表,包含节点并在这些节点上移动海龟
- php - 从 mongo 中删除特定数据
- java - Vue.js:_this 未在 eval 中定义——Java Spring 后端 json 请求
- java - 在一天中的某些时候,使用 Microsoft Graph 通过 RESTful 提取日历事件很慢
- azure-webjobs - 从 dotnet cli 发布 azure webjob
- javascript - 如何用功能性javascript切换开关替换强制导向布局中的一些节点圈?
- python - 无法导入 pip 模块
- python-3.x - 如何修复此模块导入时出现的“尝试相对导入超出顶级包”错误?