javascript - react 密码生成器

Question

我是一个 React 新手(基本的 javascript 还不错)，我创建了一个简单的密码生成器小部件，但是我似乎无法让它按照我想要的方式工作。我从 2 个单独的小部件开始(1 - 确保我可以显示随 secret 码，2 - 查看是否可以实现单选按钮和简单的错误检查)，但现在我已将它们合并在一起，密码将不会显示。有人可以帮我找出我哪里出了问题吗？任何改进代码的建议也非常感谢(这不是最终版本，它更多的是概念证明。

codepen在这里:https://codepen.io/RCP1990/pen/Zogbwa?editors=0110

我的巴别塔是

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'));

 

Answer 1

就是这个 block :

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

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