- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在练习JavaScript和ReactJs,一段时间以来我一直陷入一个问题。基本上,我试图使用ReactJs重写我的HTML,CSS,Javascript项目。
这是我的问题:(关于React代码)。说我单击问题1的第一个答案选择,类名称因此更改,样式更改(背景变为黑色)并且isClicked变为true(这两个都是EachIndividualAnswer类内部的状态)。如果我然后单击第二个答案选择,则我希望第一个答案选择的样式(以及该问题的所有其他答案选择)为null,并且isClicked为false,仅第二个答案将具有isClicked === true和className =“ clicked”。
希望这是有道理的。很抱歉发送了这么多文件,没有其他办法了。
谢谢
我的HTML,CSS和JAVASCRIPT代码。 (我试图用ReactJs重写的代码)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
var numberOfQuestions = 5;
var choicesPerQuestion = 5;
var questionNumber = document.getElementsByClassName("questionNumber");
var question = document.getElementsByClassName("question");
var answers = document.getElementsByClassName("answers");
var answer_A = document.getElementsByClassName("answer_A");
var answer_B = document.getElementsByClassName("answer_B");
var answer_C = document.getElementsByClassName("answer_C");
var answer_D = document.getElementsByClassName("answer_D");
var answer_E = document.getElementsByClassName("answer_E");
var submit = document.getElementById("submit");
// Answer key
var answerKey = [21, 3, "Nani", "Kevin Durant", "Russ"];
var userAnswerArray = new Array(5);
// Put every single possible clickable answer in 5x5 array
// clicking an answer changes its background and color
var individual_answers = new Array(numberOfQuestions);
for(let i=0; i<numberOfQuestions; i++) {
individual_answers[i] = new Array(choicesPerQuestion);
}
// Adding Event listeners to each answer choice
for (let i = 0; i < answers.length; i++) {
specificAnswers = answers[i].getElementsByTagName("li"); // answers to each questions e.g. answers to qu.1, then qu.2
for (let j = 0; j < specificAnswers.length; j++) {
individual_answers[i][j] = specificAnswers[j]; // individual answers to each qu.
var spanX = individual_answers[i][j].getElementsByTagName("span"); // did not use this
individual_answers[i][j].addEventListener("click", click(i , j));
}
}
function click(i, j) {
return function() {
console.log(individual_answers[i][j].innerText);
if(individual_answers[i][j].style.background != "black") { // if it's not black, set all to white, then put specific one to black
for(let x=0; x<choicesPerQuestion; x++) {
individual_answers[i][x].style.cssText = "background: white";
individual_answers[i][x].getElementsByTagName("span")[0].style.color = "black";
}
individual_answers[i][j].style.cssText = "background: black";
individual_answers[i][j].style.color = "green";
individual_answers[i][j].getElementsByTagName("span")[0].style.color = "white";
userAnswerArray[i] = individual_answers[i][j].innerText;
// i = question number, j = specific answer to question number i
// So on each click, if answer originally doesn't have a black background, add it to userArray
}
else { // If background is black, on click you have to remove that from individual array
individual_answers[i][j].style.cssText = "background: white";
individual_answers[i][j].getElementsByTagName("span")[0].style.color = "black";
userAnswerArray.splice(i, 1);
}
}
}
// Adding event listener to submit button
submit.addEventListener("click", score);
/* Easiest thing to do would be to make an "Answer class" for each answer. (using prototypes) with field selected.
Then count the number of answers with fields selected and compare with answer key or smthn. Try this as an exercise for later, maybe ReactJs */
/* For now I will create an array for the answers that will change as the user clicks and use the actual words to see if they match */
function score() {
/* Add a check later to see if he has answered every question or at least 60% */
var counter = 0;
for(let x=0; x<numberOfQuestions; x++) {
if(answerKey[x] == userAnswerArray[x]) {
counter++;
}
}
console.log("User has submitted the quiz and scored " + counter);
if(counter < 3) {
alert("Try again, you failed");
}
else {
alert("Are you a lizard?")
}
/* Show on a message and ask to retake*/
}
ul {
list-style-type: square;
}
ul > li {
color: blue;
font-size: 30px;
}
ul > li > span {
color: black;
font-size: 20px;
}
#submit {
font-size: 30px;
}
<!--I will try to create a multiple choice exam. The user can NOT submit until he has answered 60% of the questions. Once he submits
I will show him his score. Give him the option to see which questions he failed, as well as the right answer. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Choice Exam</title>
<link rel="stylesheet" href="mcq.css">
</head>
<body>
<h1>NASA Final Entry Exam</h1>
<h2>Only the most genius of individuals will pass</h2>
<br>
<hr>
<br>
<p class="question"><span class="questionOne">1</span>. What is 9+10</p>
<ul class="answers" id="answers1">
<li class="answer_A"><span>1</span></li>
<li class="answer_B"><span>19</span></li>
<li class="answer_C"><span>21</span></li>
<li class="answer_D"><span>90</span></li>
<li class="answer_E"><span>-1<span></li>
</ul>
<p class="question"><span class="questiontwo">2</span>. How many goals did Ronaldo score against Spain in the World Cup 2018</p>
<ul class="answers">
<li class="answer_A"><span>1</span></li>
<li class="answer_B"><span>3</span></li>
<li class="answer_C"><span>5</span></li>
<li class="answer_D"><span>0</span></li>
<li class="answer_E"><span>-1<span></li>
</ul>
<p class="question"><span class="questionThree">3</span>. Who Stole Ronaldo's (CR7) greates ever goal?</p>
<ul class="answers">
<li class="answer_A"><span>Pepe</span></li>
<li class="answer_B"><span>Messi</span></li>
<li class="answer_C"><span>Casillas</span></li>
<li class="answer_D"><span>Benzema</span></li>
<li class="answer_E"><span>Nani<span></li>
</ul>
<p class="question"><span class="questionFour">4</span>. Which one of these players ruined the NBA</p>
<ul class="answers">
<li class="answer_A"><span>Allen Iverson</span></li>
<li class="answer_B"><span>Kevin Durant</span></li>
<li class="answer_C"><span>Steph Curry</span></li>
<li class="answer_D"><span>Lebron James</span></li>
<li class="answer_E"><span>Russel Westbrook<span></li>
</ul>
<p class="question"><span class="questionFive">5</span>. Who is currently number 1 in the internet L ranking?</p>
<ul class="answers">
<li class="answer_A"><span>Drake</span></li>
<li class="answer_B"><span>Pusha T</span></li>
<li class="answer_C"><span>Russel WestBrook</span></li>
<li class="answer_D"><span>Lil Xan</span></li>
<li class="answer_E"><span>Russ<span></li>
</ul>
<button id="submit">Submit</button>
<script src="mcq.js"></script>
</body>
</html>
[App.js]
import React, { Component } from 'react';
import './App.css';
import Title from './Title/Title';
import Question from './Question/Question';
import Aux from './hoc/Aux';
class App extends Component {
state = {
counter: 0,
questionArray: [
"What is 9+10",
"How many goals did Ronaldo score against Spain in the World Cup 2018",
"Who Stole Ronaldo's (CR7) greates ever goal?",
"Which one of these players ruined the NBA",
"Who is currently number 1 in the internet L rankings?"
],
answerChoicesArray: [
["1", "19", "21", "90", "-1"],
["1", "3", "5", "0", "-1"],
["Pepe", "Messi", "Casillas", "Benzema", "Nani"],
["Allen Iverson", "Kevin Durant", "Steph Curry", "Lebron James", "Russel Westbrook"],
["Drake", "Pusha T", "Russel Westbrook", "Lil Xan", "Russ"]
]
}
render() {
return (
<div className="App">
<div className="container">
<Aux>
<Title />
<h2>Only the most genius of individuals will pass</h2>
<hr/>
<Question
questionArray={this.state.questionArray}
answerChoicesArray={this.state.answerChoicesArray} />
<button
onClick={() => alert("We don't support this yet")}
type="submit">SUBMIT</button>
</Aux>
</div>
</div>
);
}
}
export default App;
[Question.js]
import React from 'react';
import AnswerChoices from '../AnswersChoices/AnswerChoices';
const Question = (props) => // why doesn't it work if I put a curly brace here
props.questionArray.map((question, index) => {
return(
<div>
<p>{index + 1}. {question}</p>
<AnswerChoices
index={index} // try just index answersArray is the array of ALL answers
answerChoicesArray={props.answerChoicesArray} />
</div>
);
})
export default Question;
import React from 'react';
import SpecificAnswerChoice from './SpecificAnswerChoice/SpecificAnswerChoice'
const AnswerChoices = (props) => {
console.log(props.answerChoicesArray[props.index]);
return (
// 5 answers array for each question
<div>
<ul>
<SpecificAnswerChoice
answers={props.answerChoicesArray[props.index]}/>
</ul>
</div>
)
}
export default AnswerChoices;
[SpecificAnswerChoice.js]
import React, { Component } from 'react';
import EachIndividualAnswer from './EachIndividualAnswer/EachIndividualAnswer'
class SpecificAnswerChoice extends Component {
// If I click once, set all to white and specific to black
state = {
resetClicksState: true // can start w/ false then change to always true inside resetClicks function
}
resetClicks = () => {
console.log("TEST");
}
render() {
// const style = {
// backgroundColor: 'white'
// };
return(
this.props.answers.map(individualAnswer => {
return (
<EachIndividualAnswer
className={this.state.class}
individualAnswer={individualAnswer}
resetClicks={this.resetClicks}
// onClick={this.clickHandler}
/>
);
})
)
}
}
export default SpecificAnswerChoice;
import React, { Component } from 'react';
class EachIndividualAnswer extends Component {
state = {
isClicked: false,
class: ""
}
// clickHandler = (style) => {
// if(style.backgroundColor === 'white') {
// style.backgroundColor = 'black';
// style.color = 'white';
// }
// }
onClickHandler = () => {
console.log(this.state.isClicked);
console.log("djhfdf");
if(this.state.isClicked) {
var tempClass=""
this.setState({
isClicked: false,
class: tempClass
});
} else {
tempClass="clicked"
this.setState({
isClicked: true,
class:tempClass
})
}
this.props.resetClicks();
}
// testingOnClick = () => {
// console.log("If this works then I have 2+ functions on OnClick");
// }
// if props.resetClicks is true, which it always is, className='', isClicked=false for EVERY
// EachIndividualAnswer. Then I do my logc that I already had
render() {
return (<li
className={this.state.class}
onClick={this.onClickHandler}>
<span>
{this.props.individualAnswer}
</span>
</li>);
}
}
export default EachIndividualAnswer;
[Aux.js]
const aux = (props) => props.children;
export default aux;
最佳答案
如果我理解正确,这是一个可能的答案。我完全模仿这种情况,因此这不是您的完整解决方案。
class App extends React.Component {
state = {
answers: [ "1", "19", "21", "90", "-1" ],
selected: {},
}
handleClick = e => {
const {answer} = e.target.dataset;
this.setState({selected:{
[answer]: !!answer,
}})
};
render() {
const {answers} = this.state;
console.log(this.state.selected);
return (
<div>
<ul>
{
answers.map( answer =>
<li
data-answer={answer}
className={
this.state.selected[answer] ? 'colored' : ''
}
onClick={this.handleClick}
>{answer}
</li>
)
}
</ul>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.colored {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
selected
状态保存选定的情况,并根据这种情况添加类或将其设置为null。我们的
handleClick
函数会更改此选择。 render方法中有一个
console.log
,因此您可以看到发生了什么。
.bind
可以像这样。仅相关部分:
handleClick2 = answer =>
this.setState({
selected: {
[answer]: !!answer,
}
})
onClick={this.handleClick2.bind(this, answer)}
EachIndividualAnswer
组件中执行此逻辑,而不是在
SpecificAnswerChoice
组件中执行此逻辑。我的意思是保持状态并具有
handleClick
处理程序。因此,您可以使用
EachIndividualAnswer
将此处理程序传递给您的
answer
,而不是通过回调在
EachIndividualAnswer
中设置状态。因此,将无需使用数据集或
.bind
。
class App extends React.Component {
state = {
answers: [ "1", "19", "21", "90", "-1" ],
selected: {},
}
handleClick = e => {
const {index} = e.target.dataset;
this.setState({selected:{
[index]: !!index,
}})
};
render() {
const {answers} = this.state;
console.log(this.state.selected);
return (
<div>
<ul>
{
answers.map( (answer, index) =>
<li
data-index={index}
className={
this.state.selected[index] ? 'colored' : ''
}
onClick={this.handleClick}
>{answer}
</li>
)
}
</ul>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.colored {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
const {answers} = this.state
this.state
对象中选择一个属性。此代码的简写版本:
const answers = this.state.answers;
const { one, two, three } = object;
const one = object.one;
const two = object.two;
const three = object.three;
selected
是真正的交易,请声明我们保留选定的元素。
this.setState({selected:{ [answer]: !!answer }})
[answer]
,这就是我们使用的。因此,在
selected
状态下,我们正在设置一个属性,该名称是我们的
answer
变量。现在,我们使用右手边将值使用为布尔值,并且在第一次状态更改时将其始终设置为true。
answer
变量是一个字符串。在Javascript中,如果对字符串使用运算符
!
而不是逻辑运算符,则它的值为
false
。因此,我们两次使用它来获取
true
。例如,当我们单击“ 19”时,将如下所示:
selected: {
"19": !!"19"
}
!!"19"
,将得到
true
。而不是使用实际值,我们只在这里使用变量:
[answer]: !!answer
setState
的文档,将会看到它是一个异步操作。因此,React团队不鼓励我们像这样直接使用它,特别是如果我们使用状态中任何部分的先前状态。实际上,在我们的示例中我们并没有这样做,但是最好使用
this.setState
的回调。如果此说明对您来说不够用,请阅读
official documentation。这是我们这次的用法:
handleClick = answer => {
this.setState(prevState =>
({
selected: {
[answer]: !prevState.selected.answer,
}
})
)
};
setState
在这里进行回调并使用
prevState
(或您给它起的名字)来响应先前的状态。现在,由于在我们之前的状态中没有任何
selected.answer
,因此它首先是
undefined
。因此,我们可以使用
!prevState.selected.answer
来使值成为
true
,而不是在这里使用两个逻辑非操作数。请记住,在前面的示例中,我们这里的字符串不是未定义的值。这就是为什么我们在那里使用两个逻辑非操作数的原因。
const answers = ["1", "19", "21", "90", "-1"]
const AnswerChoices = () => (
<SpecificAnswerChoice answers={answers} />
)
class SpecificAnswerChoice extends React.Component {
state = {
selected: {},
}
handleClick = answer =>
this.setState(prevState =>
({
selected: {
[answer]: !prevState.selected.answer,
}
})
);
render() {
const { answers } = this.props;
return (
<div>
{
answers.map( individualAnswer => (
<EachIndividualAnswer
individualAnswer={individualAnswer}
onClick={this.handleClick}
selected={this.state.selected}
key={individualAnswer}
/>
) )
}
</div>
)
}
}
// Again, destructring. Instead of (props) we use ({....})
// and pick our individual props here.
const EachIndividualAnswer = ({selected,individualAnswer, onClick}) => {
const handleClick = () => onClick(individualAnswer)
return (
<div>
<ul>
{
<li
onClick={handleClick}
className={
selected[individualAnswer] ? 'colored' : ''
}
>{individualAnswer}
</li>
}
</ul>
</div>
)
}
const rootElement = document.getElementById("root");
ReactDOM.render(<AnswerChoices />, rootElement);
.colored {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
EachIndividualAnswer
组件声明为功能组件,因为它不必是类。另外,我为点击事件传递了
handleClick
道具。使用此处理程序,子级发送答案,父级组件将其取回并更新其状态。
EachIndividualAnswer
获得的一个道具是
selected
状态。因此,它决定是否添加一个类。因此,我们的
selected
状态驻留在
SpecificAnswerChoice
组件中,子代将其作为道具。最后,如您所见,此组件从其父级获取
answers
。
关于javascript - 在Reactjs中管理状态时遇到麻烦,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51508892/
我需要将文本放在 中在一个 Div 中,在另一个 Div 中,在另一个 Div 中。所以这是它的样子: #document Change PIN
奇怪的事情发生了。 我有一个基本的 html 代码。 html,头部, body 。(因为我收到了一些反对票,这里是完整的代码) 这是我的CSS: html { backgroun
我正在尝试将 Assets 中的一组图像加载到 UICollectionview 中存在的 ImageView 中,但每当我运行应用程序时它都会显示错误。而且也没有显示图像。 我在ViewDidLoa
我需要根据带参数的 perl 脚本的输出更改一些环境变量。在 tcsh 中,我可以使用别名命令来评估 perl 脚本的输出。 tcsh: alias setsdk 'eval `/localhome/
我使用 Windows 身份验证创建了一个新的 Blazor(服务器端)应用程序,并使用 IIS Express 运行它。它将显示一条消息“Hello Domain\User!”来自右上方的以下 Ra
这是我的方法 void login(Event event);我想知道 Kotlin 中应该如何 最佳答案 在 Kotlin 中通配符运算符是 * 。它指示编译器它是未知的,但一旦知道,就不会有其他类
看下面的代码 for story in book if story.title.length < 140 - var story
我正在尝试用 C 语言学习字符串处理。我写了一个程序,它存储了一些音乐轨道,并帮助用户检查他/她想到的歌曲是否存在于存储的轨道中。这是通过要求用户输入一串字符来完成的。然后程序使用 strstr()
我正在学习 sscanf 并遇到如下格式字符串: sscanf("%[^:]:%[^*=]%*[*=]%n",a,b,&c); 我理解 %[^:] 部分意味着扫描直到遇到 ':' 并将其分配给 a。:
def char_check(x,y): if (str(x) in y or x.find(y) > -1) or (str(y) in x or y.find(x) > -1):
我有一种情况,我想将文本文件中的现有行包含到一个新 block 中。 line 1 line 2 line in block line 3 line 4 应该变成 line 1 line 2 line
我有一个新项目,我正在尝试设置 Django 调试工具栏。首先,我尝试了快速设置,它只涉及将 'debug_toolbar' 添加到我的已安装应用程序列表中。有了这个,当我转到我的根 URL 时,调试
在 Matlab 中,如果我有一个函数 f,例如签名是 f(a,b,c),我可以创建一个只有一个变量 b 的函数,它将使用固定的 a=a1 和 c=c1 调用 f: g = @(b) f(a1, b,
我不明白为什么 ForEach 中的元素之间有多余的垂直间距在 VStack 里面在 ScrollView 里面使用 GeometryReader 时渲染自定义水平分隔线。 Scrol
我想知道,是否有关于何时使用 session 和 cookie 的指南或最佳实践? 什么应该和什么不应该存储在其中?谢谢! 最佳答案 这些文档很好地了解了 session cookie 的安全问题以及
我在 scipy/numpy 中有一个 Nx3 矩阵,我想用它制作一个 3 维条形图,其中 X 轴和 Y 轴由矩阵的第一列和第二列的值、高度确定每个条形的 是矩阵中的第三列,条形的数量由 N 确定。
假设我用两种不同的方式初始化信号量 sem_init(&randomsem,0,1) sem_init(&randomsem,0,0) 现在, sem_wait(&randomsem) 在这两种情况下
我怀疑该值如何存储在“WORD”中,因为 PStr 包含实际输出。? 既然Pstr中存储的是小写到大写的字母,那么在printf中如何将其给出为“WORD”。有人可以吗?解释一下? #include
我有一个 3x3 数组: var my_array = [[0,1,2], [3,4,5], [6,7,8]]; 并想获得它的第一个 2
我意识到您可以使用如下方式轻松检查焦点: var hasFocus = true; $(window).blur(function(){ hasFocus = false; }); $(win
我是一名优秀的程序员,十分优秀!