Javascript React.js“；“隐藏元素并显示下一个元素”；提交后

我正在制作一个Mad Libs游戏，其中向用户提出了一个问题，例如：

输入名词

用户填写正确的名称，点击提交，然后文本输入现在被隐藏，下一个问题被显示

我知道它处理的是条件渲染，但我不确定如何以及从哪里开始。我写了一个用户故事，试图在写的时候跟进，但还是有点迷路。我的用户故事是

当用户输入文本并点击submit（或enter键）时，文本输入将被隐藏（但不会被删除或删除，因为输入的值用于传递道具），下一个带有新输入的文本输入将显示到。回答所有问题后，将调用Madlibs组件

除了上面的用户故事外，所有内容都已构建并正常工作。我没有得到一个错误，在这个时候，我只是不知道如何写一个条件函数

这是我的密码：

import React, { Component } from 'react';
import styled from 'styled-components';
import Crawler from './crawler';

const NextQuestion = styled.div`
  position: absolute;
  color: white;
  display: block;
  margin-top: 108px;
`;

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: 'enter proper name',
      value2: 'noun',
      value3: 'enter another proper name',
      newValue: '',
      submitted: false,
      input1: 0,
      input2: 0,
      input3: 0,
      input4: 0,
      input5: 0,
      input6: 0,
      input7: 0
    };

    this.handleFirstChange = event => this.handleChange(event, 'value1');
    this.handleSecondChange = event => this.handleChange(event, 'value2');
    this.handleThirdChange = event => this.handleChange(event, 'value3');
    this.handleFourthChange = event => this.handleChange(event, 'value4');
    this.handleFifthChange = event => this.handleChange(event, 'value5');
    this.handleSixthChange = event => this.handleChange(event, 'value6');
    this.handleSeventhChange = event => this.handleChange(event, 'value7');
    this.handleSubmit = event => this._handleSubmit(event);
  }

  handleChange(event, type) {
    let newState = {};
    newState[type] = event.target.value;
    this.setState(newState);
  }

  _handleSubmit(event) {
    event.preventDefault();
    let toggle = this.state.visable;
    this.setState({ visable: !toggle });
  }

  render() {
    const divStyle = {
      marginTop: '50px',
      color: 'white',
      top: '25px',
      position: 'absolute'
    };
    let question = null;
    const show = this.state.visable;
    if (show) {
      question = (
        <div>
          <Crawler
            properName1={this.state.value1}
            noun1={this.state.value2}
            properName2={this.state.value3}
            properName3={this.state.value4}
            noun2={this.state.value5}
            personsName1={this.state.value6}
            noun3={this.state.value7}
          />
        </div>
      );
    }
    return (
      <div>
        <div style={divStyle}>
          <form onSubmit={this.handleSubmit}>
            <label>
              Proper Name:
              <input
                name="input1"
                type="text"
                value={this.state.value1}
                onChange={this.handleFirstChange}
              />
            </label>
            <label>
              Noun:
              <input
                name="input2"
                type="text"
                value={this.state.value2}
                onChange={this.handleSecondChange}
              />
            </label>
            <label>
              Another Proper Name:
              <input
                name="input3"
                type="text"
                value={this.state.value3}
                onChange={this.handleThirdChange}
              />
            </label>
            <label>
              And Another Proper Name:
              <input
                name="input4"
                type="text"
                value={this.state.value4}
                onChange={this.handleFourthChange}
              />
            </label>
            <label>
              Noun:
              <input
                name="input5"
                type="text"
                value={this.state.value5}
                onChange={this.handleFifthChange}
              />
            </label>
            <label>
              Person's Name:
              <input
                name="input6"
                type="text"
                value={this.state.value6}
                onChange={this.handleSixthChange}
              />
            </label>
            <label>
              Another Noun:
              <input
                name="input7"
                type="text"
                value={this.state.value7}
                onChange={this.handleSeventhChange}
              />
            </label>
            <input type="submit" value="Submit" />
          </form>
        </div>
        <NextQuestion>
          {question}
        </NextQuestion>
      </div>
    );
  }
}

export default NameForm;

import React，{Component}来自'React'；
从“样式化组件”导入样式化；
从“./Crawler”导入爬虫程序；
const NextQuestion=styled.div`
位置：绝对位置；
颜色：白色；
显示：块；
边缘顶端：108px；
`;
类NameForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值1:'输入正确的名称'，
值2:'名词'，
值3:'输入另一个专有名称'，
新值：“”，
提交：假，
输入1:0，
输入2:0，
输入3:0，
输入4:0，
输入5:0，
输入6:0，
输入7:0
};
this.handleFirstChange=event=>this.handleChange（事件'value1'）；
this.handleSecondChange=event=>this.handleChange（事件'value2'）；
this.handleThirdChange=event=>this.handleChange（事件'value3'）；
this.handleFourthChange=event=>this.handleChange（事件'value4'）；
this.handleFifthChange=event=>this.handleChange（事件'value5'）；
this.handleSixthChange=event=>this.handleChange（事件'value6'）；
this.handleSeventhChange=event=>this.handleChange（事件'value7'）；
this.handleSubmit=event=>this.\u handleSubmit（event）；
}
handleChange（事件，类型）{
让newState={}；
newState[type]=event.target.value；
this.setState（newState）；
}
_handleSubmit（事件）{
event.preventDefault（）；
让toggle=this.state.visable；
this.setState（{visable:！toggle}）；
}
render（）{
常量divStyle={
marginTop:'50px'，
颜色：'白色'，
顶部：“25px”，
位置：'绝对'
};
让问题=null；
const show=this.state.visable；
如果（显示）{
问题=(
);
}
返回(
专有名称：
名词：
另一个专有名称：
还有另一个专有名称：
名词：
姓名：
另一个名词：
{问题}
);
}
}
导出默认名称表单；

我用这个练习来教我更多关于反应和条件的知识。谢谢您的帮助。

问题列表 首先，您需要创建一个问题列表：

array

const QuestionsList = [
    {
         // Your question title
         q: "Are you a human?",

         // Validate the user answer
         a: (answer) => (answer === 'yes'),
         
         // Force user to give a correct answer
         required: true
        
        // Add more properties
        ...
    },
    ...
];

您可以通过设置数组的

索引来导航问题：

this.state = { current: 0 }
...
   
// Select current question
QuestionList[this.state.current]
    
// Select next question
QuestionList[this.state.current + 1]
   
// Select last question
QuestionList[QuestionList.length - 1]

问题成分
当用户输入文本并点击submit时，文本输入被隐藏（但不会被删除或删除，因为输入的值用于传递道具），下一个带有新输入的文本输入将显示到

由于您只使用一个输入
[text]
，因此您可以对所有问题使用单个组件，
无需在此处处理
条件
：

    const RenderQuestion = (
        <div>
            <h2>{question.q}</h2>
            <input type="text"
                   value={this.state.value}
                   onChange={this.handleChange}
            />
            <button onClick={this.handleSubmit}>
                Submit
            </button>
      </div>
    );

见：

完整的
回答所有问题后，将调用Madlibs组件

内联条件呈现元素的另一种方法是使用JavaScript条件运算符：

见：

实例

常量问题列表=[
{
问：“你叫什么名字？”，
答：（答案）=>/^[a-Za-z\s]+$/.测试（答案），
//强制用户给出正确答案
必填项：true
},
{
q：“a型颜色：”，
答：（答）=>{
常量颜色=[“蓝色”、“绿色”、“红色”、“黄色”、“黑色”、“棕色”、“橙色”、“粉色”、“紫色”、“白色”、“灰色”]
返回颜色。包括（答案）；
},
必填项：true
},
];
类提问扩展了React.Component{
建造师（道具）{
超级（道具）；
//初始状态
this.state={
电流：0，
值：“”，
已完成：错误，
数据：[]
};
//绑定处理程序
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（）{
const{questions}=this.props；
常数指数=问题长度-1；
让state={}；
this.setState（prev=>{
//瓦尔斯
const{value，current}=prev；
常量问题=问题[当前]；
常量验证=问题a（值）；
//如果输入不为空
如果（value.length>0）{
//调试验证
！validation&&console.log（“请输入有效值！”）；
//强制用户给出正确答案）
if（question.required&&validation==false）返回状态；
//模板字符串的数据
let data=prev
this.setState(prev => {
     
     // Get previous state
     const {value, current} = prev;
    
     //If input not empty
     if (value.length > 0) { 
            
            // Validate answer: true / false
            const validation =  questions[current].a(value);
            
            //If not last question
            return (prev.current < index) ?
            
            //Select next question / reset input
            { 
                current: prev.current + 1,
                value:''
            } :
             
            // else: Completed!
            { completed: true };
            
     }
   }); 

{ this.state.completed ? <Madlibs /> : RenderQuestion }

condition === true  && element / method

condition ? true : false