Javascript DOM元素没有初始化
我重新使用了一个用HTML/JS/CSS编写的旧代码,并试图模仿它来做出反应,但它不起作用。我可能做不到Javascript DOM元素没有初始化,javascript,reactjs,dom,Javascript,Reactjs,Dom,我重新使用了一个用HTML/JS/CSS编写的旧代码,并试图模仿它来做出反应,但它不起作用。我可能做不到 import React from 'react' class ClassCreationForm extends React.Component { render() { // Questions Array const questions = [ { question: 'Enter Your First Name' }, { qu
import React from 'react'
class ClassCreationForm extends React.Component {
render() {
// Questions Array
const questions = [
{ question: 'Enter Your First Name' },
{ question: 'Enter Your Last Name' },
{ question: 'Enter Your Email', pattern: /\S+@\S+\.\S+/ },
{ question: 'Create A Password', type: 'password' }
];
// Transition Times
const shakeTime = 100; // Shake Transition Time
const switchTime = 200; // Transition Between Questions
// Init Position At First Question
let position = 0;
// Init DOM Elements
const formBox = document.querySelector('#form-box');
const nextBtn = document.querySelector('#next-btn');
const prevBtn = document.querySelector('#prev-btn');
const inputGroup = document.querySelector('#input-group');
const inputField = document.querySelector('#input-field');
const inputLabel = document.querySelector('#input-label');
const inputProgress = document.querySelector('#input-progress');
const progress = document.querySelector('#progress-bar');
// EVENTS
// Get Question On DOM Load
document.addEventListener('DOMContentLoaded', getQuestion);
// Next Button Click
nextBtn.addEventListener('click', validate);
// Input Field Enter Click
inputField.addEventListener('keyup', e => {
if (e.keyCode == 13) {
validate();
}
});
// FUNCTIONS
// Get Question From Array & Add To Markup
function getQuestion() {
// Get Current Question
inputLabel.innerHTML = questions[position].question;
// Get Current Type
inputField.type = questions[position].type || 'text';
// Get Current Answer
inputField.value = questions[position].answer || '';
// Focus On Element
inputField.focus();
// Set Progress Bar Width - Variable to the questions length
progress.style.width = (position * 100) / questions.length + '%';
// Add User Icon OR Back Arrow Depending On Question
prevBtn.className = position ? 'fas fa-arrow-left' : 'fas fa-user';
showQuestion();
}
// Display Question To User
function showQuestion() {
inputGroup.style.opacity = 1;
inputProgress.style.transition = '';
inputProgress.style.width = '100%';
}
// Hide Question From User
function hideQuestion() {
inputGroup.style.opacity = 0;
inputLabel.style.marginLeft = 0;
inputProgress.style.width = 0;
inputProgress.style.transition = 'none';
inputGroup.style.border = null;
}
// Transform To Create Shake Motion
function transform(x, y) {
formBox.style.transform = `translate(${x}px, ${y}px)`;
}
// Validate Field
function validate() {
// Make Sure Pattern Matches If There Is One
if (!inputField.value.match(questions[position].pattern || /.+/)) {
inputFail();
} else {
inputPass();
}
}
// Field Input Fail
function inputFail() {
formBox.className = 'error';
// Repeat Shake Motion - Set i to number of shakes
for (let i = 0; i < 6; i++) {
setTimeout(transform, shakeTime * i, ((i % 2) * 2 - 1) * 20, 0);
setTimeout(transform, shakeTime * 6, 0, 0);
inputField.focus();
}
}
// Field Input Passed
function inputPass() {
formBox.className = '';
setTimeout(transform, shakeTime * 0, 0, 10);
setTimeout(transform, shakeTime * 1, 0, 0);
// Store Answer In Array
questions[position].answer = inputField.value;
// Increment Position
position++;
// If New Question, Hide Current and Get Next
if (questions[position]) {
hideQuestion();
getQuestion();
} else {
// Remove If No More Questions
hideQuestion();
formBox.className = 'close';
progress.style.width = '100%';
// Form Complete
formComplete();
}
}
// All Fields Complete - Show h1 end
function formComplete() {
const h1 = document.createElement('h1');
h1.classList.add('end');
h1.appendChild(
document.createTextNode(
`Thanks ${
questions[0].answer
} You are registered and will get an email shortly`
)
);
setTimeout(() => {
formBox.parentElement.appendChild(h1);
setTimeout(() => (h1.style.opacity = 1), 50);
}, 1000);
}
return(
<div id="container">
<h1 class="logo">Form Example</h1>
<div id="form-box">
<i id="prev-btn" class="fas fa-arrow-left"></i>
<i id="next-btn" class="fas fa-arrow-right"></i>
<div id="input-group">
<input id="input-field" required> </input>
<label id="input-label"></label>
<div id="input-progress"></div>
</div>
<div id="progress-bar"></div>
</div>
</div>
)
}
}
export default ClassCreationForm
从“React”导入React
类ClassCreationForm扩展了React.Component{
render(){
//问题数组
常量问题=[
{问题:'输入您的名字'},
{问题:'输入您的姓氏'},
{问题:'输入您的电子邮件',模式:/\S+@\S+\.\S+/},
{问题:“创建密码”,键入:“密码”}
];
//过渡时间
常量shakeTime=100;//抖动转换时间
const switchTime=200;//问题之间的转换
//第一个问题的初始位置
设位置=0;
//初始化DOM元素
const formBox=document.querySelector(“#form box”);
const nextBtn=document.querySelector(“#next btn”);
const prevBtn=document.querySelector(“#prev btn”);
const inputGroup=document.querySelector(“#输入组”);
const inputField=document.querySelector(“#输入字段”);
const inputLabel=document.querySelector(“#输入标签”);
const inputProgress=document.querySelector(“#输入进度”);
const progress=document.querySelector(“#进度条”);
//事件
//在DOM负载上获取问题
document.addEventListener('DOMContentLoaded',getQuestion);
//下一步按钮单击
nextBtn.addEventListener('click',validate');
//输入字段输入单击
inputField.addEventListener('keyup',e=>{
如果(e.keyCode==13){
验证();
}
});
//功能
//从数组中获取问题并添加到标记
函数getQuestion(){
//获取当前问题
inputLabel.innerHTML=问题[position]。问题;
//获取当前类型
inputField.type=问题[position]。键入| |“text”;
//获取当前答案
inputField.value=问题[位置]。回答| |“”;
//关注要素
inputField.focus();
//将进度条宽度-变量设置为问题长度
progress.style.width=(位置*100)/questions.length+'%';
//根据问题添加用户图标或后退箭头
prevBtn.className=位置?'fas fa向左箭头':'fas fa user';
showQuestion();
}
//向用户显示问题
函数showQuestion(){
inputGroup.style.opacity=1;
inputProgress.style.transition='';
inputProgress.style.width='100%';
}
//向用户隐藏问题
函数hideQuestion(){
inputGroup.style.opacity=0;
inputLabel.style.marginLeft=0;
inputProgress.style.width=0;
inputProgress.style.transition='none';
inputGroup.style.border=null;
}
//变换以创建抖动运动
函数变换(x,y){
formBox.style.transform=`translate(${x}px,${y}px)`;
}
//验证字段
函数验证(){
//如果有,请确保模式匹配
if(!inputField.value.match(问题[position].pattern | |/.+/){
inputFail();
}否则{
inputPass();
}
}
//字段输入失败
函数inputFail(){
formBox.className='错误';
//重复抖动动作-将i设置为抖动次数
for(设i=0;i<6;i++){
setTimeout(转换,shakeTime*i,((i%2)*2-1)*20,0);
setTimeout(转换,shakeTime*6,0,0);
inputField.focus();
}
}
//字段输入已通过
函数inputPass(){
formBox.className='';
setTimeout(转换,shakeTime*0,0,10);
setTimeout(转换,shakeTime*1,0,0);
//将应答存储在数组中
问题[位置]。答案=inputField.value;
//增量位置
位置++;
//如果有新问题,请隐藏当前问题并获取下一个问题
如果(问题[职位]){
hideQuestion();
getQuestion();
}否则{
//如果没有更多问题,请删除
hideQuestion();
formBox.className='close';
progress.style.width='100%';
//表格完整
formComplete();
}
}
//所有字段完成-显示h1结束
函数formComplete(){
常量h1=document.createElement('h1');
h1.classList.add('end');
h1.儿童(
document.createTextNode(
`谢谢${
问题[0]。答案
}您已注册,不久将收到一封电子邮件`
)
);
设置超时(()=>{
formBox.parentElement.appendChild(h1);
setTimeout(()=>(h1.style.opacity=1),50);
}, 1000);
}
返回(
范例
)
}
}
导出默认ClassCreationForm
我面临的问题是,inputLabel.innerHTML
正在生成错误,因为inputLabel
为空。我想这可能是我的方式初始化它谁是错的
关于我试图向您展示React组件的基本结构。这至少应该运行并显示label元素中的第一个问题 我仍然建议您学习如何构建组件及其工作原理的教程。这是一种不同于常规(普通)JavaScript的风格,但对于初学者来说,它有着非常好的学习曲线 不要放弃,你会成功的
import React from 'react'
class ClassCreationForm extends React.Component {
state: {
questions: [
{ phrase: 'Enter Your First Name' },
{ phrase: 'Enter Your Last Name' },
{ phrase: 'Enter Your Email', pattern: /\S+@\S+\.\S+/ },
{ phrase: 'Create A Password', type: 'password' }
],
shakeTime: 100,
switchTime: 200,
position: 0,
currentAnswer: ''
}
handleKeyUp(event) {
const { value, keyCode } = event;
this.setState({
currentAnswer: value
});
if (keyCode == 13) {
this.validate();
}
}
handleNextClick(event) {
this.validate();
}
validate() {
console.log(this.state.currentAnswer);
}
render() {
const { questions, position } = this.state;
const { phrase, type, pattern } = questions[position];
return (
<div id="container">
<h1 className="logo">Form Example</h1>
<div id="form-box">
<i id="prev-btn" className="fas fa-arrow-left"></i>
<i
id="next-btn"
className="fas fa-arrow-right"
onClick={this.handleNextClick}
></i>
<div id="input-group">
<input
id="input-field"
type={type || 'text'}
onKeyUp={this.handleKeyUp}
required
/>
<label id="input-label">
{ phrase }
</label>
<div id="input-progress"></div>
</div>
<div id="progress-bar"></div>
</div>
</div>
)
}
}
从“React”导入React
类ClassCreationForm扩展了React.Component{
声明:{
问题:[
{短语:'输入你的名字'},
{短语:'输入您的姓氏'},
{短语:“输入您的电子邮件”,模式:/\S+@\S+\.\S+/},
{短语:“创建密码”,键入:“密码”}
],
时间:100,,
切换时间:200,
位置:0,
当前答案:“”
}
handleKeyUp(事件){
const{value,keyCode}=事件;
这是我的国家({
currentAnswe