问题描述
我的API响应如下。
dat:
mat:
opt: Array(4)
0: {text: "Instagram"},1: {text: "Facebook"},2: {text: "Twitter"},3: {text: "LinkedIn"}
opts: Array(4)
0: {text: "1"},1: {text: "2"},2: {text: "3"},3: {text: "4"}
我有4个文本(可选),如instagram,facebook,twitter和linkedin,每个文本都有4个单选按钮,其值(可选)分别为1,2,3和4。
用户可以从每个文本中选择任意一个单选按钮,该单选按钮的值将在单选按钮的标签上提及(例如:3)(选择)。
用户可以从每个text(opt)中检查和取消选中任何这些单选按钮,但是发送到数据库的最终值应采用与get api响应相同的格式,如下所示,关于opt数组。 / p>
如果用户选择了以下格式
0:
id: "3",qn: "facebook"
1:
id: "4",qn: "instagram"
2:
id: "1",qn: "linkedin"
3:
id: "4"
qn: "twitter"
然后上述响应应按获取api响应的线性顺序进行,如下所示。.(应按opt(instagram-> facebook-> twitter-> linkedin)的顺序)
0:
id: "4",qn: "instagram"
1:
id: "3",qn: "twitter"
2:
id: "4",qn: "twitter"
3:
id: "1"
qn: "linkedin"
下面的我的代码。
let questions = [];
class App extends Component {
constructor(props) {
super(props);
console.log(this.props);
this.state = {
btndisabled: true,questions: [],};
}
changeRadioHandler = (event,j) => {
const qn = event.target.name;
const id = event.target.value;
let idVal = this.props.dat.mat.opt;
let text = this.props.dat.mat.opts;
let userAnswer = [];
for (let j = 0; j < text.length; j++) {
userAnswer.push(false);
}
const option = text.map((t,index) => ({
text: t.text,userAnswer: userAnswer[index],}));
const elIndex = option.findindex((element) => element.text === id);
let options = [...option];
options[elIndex] = {
...options[elIndex],userAnswer: true,};
const question = {
id: event.target.value,qn,options,};
if (this.state.questions.some((question) => question.qn === qn)) {
questions = [
...this.state.questions.filter((question) => question.qn !== qn),question,];
} else {
questions = [...this.state.questions,question];
}
this.setState({ questions });
if (questions.length === idVal.length) {
this.setState({
btndisabled: false,});
}
};
submitHandler = () => {
console.log("Hola",questions);
};
render() {
return (
<div class="mat-bd">
{this.props.dat.mat && (
<div class="grid">
{this.props.dat.mat.opt.map((questions,j) => {
return (
<div class="rows" key={j}>
<div class="cell">{questions.text}</div>
{this.props.dat.mat.opts.map((element,i) => {
return (
<div class="cell" key={i}>
<input
type="radio"
id={"rad" + j + i}
name={questions.text}
value={element.text}
onChange={(event) =>
this.changeRadioHandler(event,j)
}
></input>
<label htmlFor={"rad" + j + i}>{element.text}</label>
</div>
);
})}
</div>
);
})}
</div>
)}
<div class="buttonSubmit">
<button
class="btn btn-primary"
disabled={this.state.btndisabled}
onClick={this.submitHandler}
>
Submit
</button>
</div>
</div>
);
}
}
export default App;
注意: json值格式来自控制台。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)