Блог

Я пытаюсь создать базовую многоступенчатую веб-форму на Javascript. Я хотел выполнить что-то вроде раздела «Формы» в Full Stack Open, создав коллекцию (массив) вопросов, затем отобразив их в виде меток на моей веб-странице, отфильтрованных так, чтобы в определенное время появлялись только подходящие. Например, когда вы впервые посещаете страницу, на ней будет написано «Следующие несколько вопросов позволят оценить ситуацию с вашим бюджетом», затем, после нажатия кнопки «Пуск», она перейдет к первому вопросу, затем к следующему, ко второму и так далее.

Я думал, что выполнил это правильно, отобразив отфильтрованную коллекцию (фаза инициализируется значением 0 вне приложения):

  const questionPhase = () => {
      
        if (phase < 3){
            phase = phase   1;
      
        }
            
        else if(phase == 3){
            phase = 0;
            addToBudget(attribute);              
        }
        console.log(phase);
         
}
 return (
    <div>
        <h3> Please answer some questions to start</h3>
        <ul>
            {questions.filter(question => question.phase === phase).map(question =>
                { < label > {question.script} 
                <input type="text"
                question = {question.attribute}
                value={question.attribute}
                onChange={handleInput}
                />
                </label>})}
        </ul>
        <button onClick={questionPhase}> {phase === 2 ? 'Next' : 'Submit'} </button>
    </div>
)
 

Я провел некоторое протоколирование и определил, что фаза фактически меняется каждый раз, когда я нажимаю кнопку внизу. Но чего не происходит, так это либо отображения вопросов (и меток), либо изменения надписей на кнопках.

Я не уверен, что я сделал не так? Я уверен, что есть какой-то тонкий аспект потока управления, который я пропустил, но я не знаю, что — я понял, что, как объясняется в FSO, приложение постоянно запускается каждый раз, когда происходит изменение путем нажатия кнопки или чего-то еще, что должно быть событием, созданным кнопкойнажмите.

 
        import React from 'react'
    
    const questions = [
    
        {
            phase: 1 ,
            script: 'What is your monthly income?',
            attribute: "income"
        },
        
        {
            phase: 2,
            script: 'what are you monthly expenses?',
            attribute: "expenses"
        }
    ]
    
    export default questions

 

 const handleInput = (event) => {
    const value = event.target.value;
    console.log('valued!')
    setAttribute({
        ...attribute,
        [event.target.question]: value
    })

}