Question

我是一个React新手，我试图使用react构建我的键盘，我有一个按钮来输入数字，在最大位数为4的屏幕上，我已经做了这个逻辑。我接下来要做的是，当mi按下我的数字时，数字被隐藏并且显示为*。我没有在HTML上使用Input。

这是我的Button组件：

export const Button = ({ children, handleClick})=> (
    <div 
        className={`button-container ${children}`}
        onClick={() => handleClick(children)}>
        {children}
    </div>
)

这是我的屏幕组件：

export const Screen = props => (
   <div className="input">
   {props.screen}
   </div>
)

这是我的主要应用程序：

class App extends Component {
  //extend component class
  constructor(props) {
    super(props);

    this.state = {
      screen: [],
      sucess: 'SUCESS',
      error: 'ERRO',
      tries: 3, 
      password: ''
    }
  }

  //I tried using an input on the screen component
  //but this worked
  //not sure if "the react way"
  addPassword = val => {
     return this.state.screen.length > 3 ? '' : this.setState({screen: this.state.screen + val});
  }

  /*
  pin = '1234';
  validadePassword = (addPassword, pin) => {
    //return addPassword === pin ? this.state.screen.type === 'password' : this.state.screen.type === 'number';
    console.log(pin);
  }*/

  render() {
    return (
      <div className="App">
        <h1>Pin pad</h1>
        <h2>Addcode!</h2>
        <div className="container">
          <Screen
            screen={this.state.screen}

            length = {5}>
          </Screen>
          <div className="row justify-content-md-center">
            <Button handleClick={this.addPassword}>7</Button>
            <Button handleClick={this.addPassword}>8</Button>
            <Button handleClick={this.addPassword}>9</Button>
          </div>
          <div className="row justify-content-md-center">
            <Button handleClick={this.addPassword}>4</Button>
            <Button handleClick={this.addPassword}>5</Button>
            <Button handleClick={this.addPassword}>6</Button>
          </div>
          <div className="row justify-content-md-center">
            <Button handleClick={this.addPassword}>1</Button>
            <Button handleClick={this.addPassword}>2</Button>
            <Button handleClick={this.addPassword}>3</Button>
          </div>
          <div className="row justify-content-md-center">
              <Button handleClick={this.addPassword} class="col align-self-center">0</Button>
            </div>
          </div>
        </div>
    );
  }
}

export default App;

我将非常感谢，因为我试图学习该库及其工作原理。

Answer 1

由于您的map值是一个列表，因此您可以将列表* join设置为let digits = props.screen.map(digit => '*').join(''); return <div className="input"> {digits} </div>;字符，然后将其{{1}}放在字符串中。示例：

{{1}}

使用输入按钮反应Pinpad

1 个答案: