Javascript 反应密码生成器

我是一个React新手（在基本javascript中相当不错），我创建了一个简单的密码生成器小部件，但我似乎无法让它按我想要的方式工作。我从两个单独的小部件开始（1-确保我可以显示随机密码，2-查看是否可以实现单选按钮和简单的错误检查），但现在我已经将它们合并在一起，密码不会显示。 有人能帮我找出哪里出了问题吗？任何改进代码的建议都将受到极大的赞赏（这不是最终版本，更多的是概念证明）

代码笔在这里：

我的宝贝是

class AppPicker extends React.Component {
  constructor() {
    super();

    this.state = {
      appl:'',
      message:'Please select an application',
      pass:'[Password]',
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({
      appl: event.target.value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    const chosen = this.state.appl;
    if (chosen == ''){
      this.setState({ message:'You didnt select an application!' })
    }

    else if (chosen != '') { 
      const obj = [ "Amaze", "Apple", 
          "Bacon", "Beach", "Beer","Bench","Bill", "Blue", "Books", "Bounce", "Bubble","Bunny",
          "Cake","Candy","Canoe", "Cat", "Chirpy","Cherry", "Clouds", "Cream", "Comet",
          "Dan","Dance","Dream","Dtown","Dog", 
          "Flan", "Flip", "Flower", "Fluff","Funny",
          "Glad", "Goose","Green", 
          "Happy","Hello","Hodor", "Hugs",
          "Jaunty", "Jolly", "Jump", 
          "Karate", "Kayak", "Kitten","Kitty", 
          "Lager", "Latte", "Laugh", "Lift","Lilly", "Lion","Light", "Loved", 
          "Merry","Mocha", "Morty", "Music", 
          "Nature",
          "Ocean", 
          "Peppy","Plant","Play", "Pretty","Puppy", "Pop", "Pony", "Pork", 
          "Quick", 
          "Red","Rick", "Rose", "Rosy", "Roses", "Run", 
          "Shark", "Shine", "Skip", "Sleep", "Smile","Sport","Star", "Sweet",
          "Tech","Tiger", "Trees", "Triple", "Turtle",  
          "Walk", "Water",  "Widly",  
          "Zen", "Zippy","Zombie", ];

         if (chosen =='Fannie Mae') {
          const symbol = ["@", "-", "_"];
         }
         else {
           const symbol = ["@", "#", "$"];
         }

         var initPass = obj[Math.floor(Math.random()*obj.length)];
         var initSym = symbol[Math.floor(Math.random()*symbol.length)];   

         this.setState({ pass: initPass+initSym })
     }
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <h3>Password Generator</h3>
        <p className="warning">{this.state.message}</p>
        <ul>
          <li>
            <label>
              <input
                type="radio"
                value="MSP"
                checked={this.state.appl === "MSP"}
                onChange={this.handleChange}
              />
              MSP
            </label>
          </li>
          <li>
            <label>
              <input
                type="radio"
                value="Fannie Mae"
                checked={this.state.appl === "Fannie Mae"}
                onChange={this.handleChange}
              />
              Fannie Mae
            </label>
          </li>
          <li>
            <label>
              <input
                type="radio"
                value="LivePerson"
                checked={this.state.appl === "LivePerson"}
                onChange={this.handleChange}
              />
              LivePerson
            </label>
          </li>
      </ul>
        <div>{this.state.pass}</div>
        <button type="submit" className="btn btn-lg">Generate</button>
      </form>
    );
  }
}

ReactDOM.render(<AppPicker />, document.getElementById('app'));

类AppPicker扩展React.Component{ 构造函数（）{ 超级（）； 此.state={ 应用程序：“”， 消息：“请选择一个应用程序”， 密码：“[密码]”， }; this.handleChange=this.handleChange.bind（this）； this.handleSubmit=this.handleSubmit.bind（this）； } 手变（活动）{ 这是我的国家({ 应用程序：event.target.value }); } handleSubmit（事件）{ event.preventDefault（）； const selected=this.state.appl； 如果（所选=“”）{ this.setState（{消息：'您没有选择应用程序！'}） } 否则如果（已选择！=''）{ const obj=[“惊奇”，“苹果”， “培根”，“海滩”，“啤酒”，“长凳”，“比尔”，“蓝色”，“书”，“弹跳”，“泡泡”，“兔子”， “蛋糕”、“糖果”、“独木舟”、“猫”、“活泼”、“樱桃”、“云”、“奶油”、“彗星”， “丹”，“舞”，“梦”，“镇”，“狗”， “Flan”、“Flip”、“Flower”、“Fluff”、“fully”， “高兴”、“鹅”、“绿”， “快乐”、“你好”、“霍多”、“拥抱”， “快活”、“快乐”、“跳跃”， “空手道”、“皮艇”、“小猫”、“小猫”， “啤酒”、“拿铁”、“笑”、“电梯”、“礼来”、“狮子”、“轻”、“爱”， “快乐”、“摩卡”、“摩蒂”、“音乐”， “自然”， “海洋”， “活力”、“植物”、“玩耍”、“漂亮”、“小狗”、“流行”、“小马”、“猪肉”， “快”， “红色”、“瑞克”、“玫瑰”、“玫瑰”、“玫瑰”、“奔跑”， “鲨鱼”、“闪亮”、“跳跃”、“睡眠”、“微笑”、“运动”、“明星”、“甜蜜”， “科技”、“老虎”、“树木”、“三重”、“海龟”， “散步”、“水”、“寡妇”， “禅”、“活泼”、“僵尸”]； 如果（已选择=='Fannie Mae'）{ 常量符号=[“@”、“-”、“”]； } 否则{ 常量符号=[“@”、“#”、“$”]； } var initPass=obj[Math.floor（Math.random（）*obj.length）]； var initSym=symbol[Math.floor（Math.random（）*symbol.length）]； this.setState（{pass:initPass+initSym}） } } render（）{ 返回( 密码生成器

{this.state.message}

• MSP
• 房利美
• 活人

{this.state.pass} 生成 ); } } ReactDOM.render（，document.getElementById（'app'））； 就是这个街区：

if (chosen =='Fannie Mae') {
  const symbol = ["@", "-", "_"];
}
else {
  const symbol = ["@", "#", "$"];
}

您正在有限范围内声明常量符号。离开if块后，符号将丢失。您需要将符号移到if上方，并用let替换常量修饰符，因为在初始声明后将无法设置它。

此块：

if (chosen =='Fannie Mae') {
  const symbol = ["@", "-", "_"];
}
else {
  const symbol = ["@", "#", "$"];
}

---

您正在有限范围内声明常量符号。离开if块后，符号将丢失。您需要将符号移到if上方，并用let替换常量修饰符，因为在初始声明后无法设置它。

以下是工作版本：

你所拥有的：

if (chosen =='Fannie Mae') {
          const symbol = ["@", "-", "_"];
         }
         else {
           const symbol = ["@", "#", "$"];
         }

你应该做的是：

    let symbol;
    if (chosen =='Fannie Mae') {
       symbol = ["@", "-", "_"];
    }
    else {
       symbol = ["@", "#", "$"];
    }

---

这确实是Javascript的一个简单错误。下次，我建议尝试使用调试器解决它，而不是在这里询问它。

以下是工作版本：

你所拥有的：

if (chosen =='Fannie Mae') {
          const symbol = ["@", "-", "_"];
         }
         else {
           const symbol = ["@", "#", "$"];
         }

你应该做的是：

    let symbol;
    if (chosen =='Fannie Mae') {
       symbol = ["@", "-", "_"];
    }
    else {
       symbol = ["@", "#", "$"];
    }

---

这对于Javascript来说确实是一个简单的错误。下次，我建议尝试使用调试器来解决它，而不是在这里询问它。

阅读ES6中的块范围。首先，在if/else块中定义变量是个坏主意。但是对于ES6，

const

和

让

将块范围设置到它们在其中创建的块。Pre很明显，您只有函数或全局作用域。因为您在if/else块中定义了

symbol

，所以在这些块之外无法访问它们。

请阅读ES6中的块作用域。首先，在if/else块中定义变量是个坏主意。但是在ES6中，

const

和

让

将块作用域限定到它们所在的块e在中创建。以前，您只有功能范围或全局范围。由于您在if/else块中定义了

symbol

，因此无法在这些块之外访问它们。

看起来问题出在

symbol

上。您是在if/else条件下声明它的

尝试更改此选项：

 if (chosen =='Fannie Mae') {
   const symbol = ["@", "-", "_"];
 }
 else {
  symbol = ["@", "#", "$"];
 }

致：

---

…因为在设置

initSym

的行上无法识别符号，所以问题似乎出在

symbol

上。您将其声明为if/else条件

尝试更改此选项：

 if (chosen =='Fannie Mae') {
   const symbol = ["@", "-", "_"];
 }
 else {
  symbol = ["@", "#", "$"];
 }

致：

---

…因为无法在设置

initSym

的行上识别符号，所以实际上您的代码有一个错误，具体如下：

        if (chosen =='Fannie Mae') {
          const symbol = ["@", "-", "_"]; //here
         }
         else {
           const symbol = ["@", "#", "$"]; // and here
         }

         var initPass = obj[Math.floor(Math.random()*obj.length)];
         var initSym = symbol[Math.floor(Math.random()*symbol.length)]; //and here  

主要问题是您定义了两次

symbol

，当您的案例是

MSP

时，它没有定义

此外，对于IF/ELSE的代码块，您的变量不会存在于它之外。因此，当您执行

symbol.length

时，它不会被定义。正确的代码方法是初始化变量符号，然后根据每种情况分配它。如下所示：

        let symbol = [];
        if (chosen =='Fannie Mae') {
          symbol = ["@", "-", "_"];
         }
         else {
           symbol = ["@", "#", "$"];
         }

         var initPass = obj[Math.floor(Math.random()*obj.length)];
         var initSym = symbol[Math.floor(Math.random()*symbol.length)]; //and then this will work.  

---

实际上，您的代码有一个错误，具体如下：

        if (chosen =='Fannie Mae') {
          const symbol = ["@", "-", "_"]; //here
         }
         else {
           const symbol = ["@", "#", "$"]; // and here
         }

         var initPass = obj[Math.floor(Math.random()*obj.length)];
         var initSym = symbol[Math.floor(Math.random()*symbol.length)]; //and here  

主要问题是您定义了两次

symbol

，并且