在 React.js 中手动设置输入值

2020-10-17 08:00飞浪

介绍

在 React.js 中设计和开发前端界面时，您会遇到需要用户数据的情况。处理用户数据是任何 React 开发人员的必备技能。某些场景需要您在将输入数据发送到 API 或数据库之前手动设置输入数据。

假设您是一名 React 开发人员，正在设计一个登录表单，要求用户输入用户名和密码。在用户登录到您的应用程序之前，您的 React 应用需要显示用户提交的验证码，以验证他们不是机器人。本指南将向您展示如何手动生成和设置此验证码输入。

设置示例应用程序

打开你的终端并运行这些命令来创建一个基本的 React 应用程序。

      npx create-react-app react-manually_setInput

cd react-manually_setInput

npm start

在你的基本 React 应用程序中包括 React Bootstrap。

      npm install react-bootstrap bootstrap

在您的app.js文件中，也包含样式表。

      import 'bootstrap/dist/css/bootstrap.min.css';

初始设置

复制并粘贴下面的示例代码以创建一个简单的登录表单，其中包含您将手动生成的用户名、密码和验证码输入。

      import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Button, Row, Col, Card, Form} from 'react-bootstrap';


class App extends Component{
  constructor(props) {
    super(props);
    this.state = ({
        display: false,
        btnDisplay: false,
        username: "",
        password: "",
    });

    this.handleUsername = this.handleUsername.bind(this);
    this.handlePassword = this.handlePassword.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }
  handleUsername(e){
      let username = e.target.value;
      this.setState({
          username: username
      })
  }

  handlePassword(e){
      let password = e.target.value;
      this.setState({
          password: password
      })
  }

  handleSubmit(e) {
      e.preventDefault();
      if (!this.state.username && !this.state.password)
          return;
      this.setState({
          display: true,
          btnDisplay:true
      })
  }

  renderCaptcha(){
      return(
          <div>
              <Form.Group as={Row} controlId="formPlaintextEmail">
                  <Form.Label column sm="4">
                      Captcha
                  </Form.Label>
                  <Col>
                      <Form.Control type="text" placeholder="Enter Captcha"  />
                  </Col>
              </Form.Group>

              <Button variant="primary" type="save" disabled={this.state.btnDisplay}>
                  Login
              </Button>

          </div>
      )
  }

  render() {
    return (
        <Row>
          <Col>
            <Card style={{ width: '20rem' }}>
                <Card.Body>
                    <Form>
                        <Form.Group >
                            <Form.Label>Username</Form.Label>
                            <Form.Control type="username" placeholder="Enter username"
                                          onChange={this.handleUsername}
                            />
                        </Form.Group>

                        <Form.Group >
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" placeholder="Password"
                                          onChange={this.handlePassword}
                            />
                        </Form.Group>

                        <Button variant="primary" type="submit"
                                onClick={this.handleSubmit}
                        >
                            Submit
                        </Button>

                        {this.state.display? this.renderCaptcha():""}
                    </Form>

                </Card.Body>
            </Card>
          </Col>
        </Row>
    );
  }
}

export default App;
    

在上面的示例代码中，验证码表单最初是不可见的。handleSubmit函数验证没有空值，然后继续将显示设置为 true。然后，这将触发验证码表单可见，并强制用户输入将手动生成和显示的验证码值。该代码还通过禁用登录按钮来确保用户无法在没有验证码的情况下登录。

完成后，下一步是随机创建验证码值，然后将其显示给用户。复制下面的示例代码。

      import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Button, Row, Col, Card, Form} from 'react-bootstrap';


class App extends Component{
  constructor(props) {
    super(props);
    this.state = ({
        display: false,
        btnDisplay: false,
        username: "",
        password: "",
        captcha: "",
        userCaptcha: ""
    });

    this.handleUsername = this.handleUsername.bind(this);
    this.handlePassword = this.handlePassword.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleCaptcha = this.handleCaptcha.bind(this);

  }
  handleUsername(e){
      let username = e.target.value;
      this.setState({
          username: username
      })
  }

  handlePassword(e){
      let password = e.target.value;
      this.setState({
          password: password
      })
  }

  handleSubmit(e) {
      e.preventDefault();
      if (!this.state.username && !this.state.password)
          return;
      this.setState({
          display: true,
          btnDisplay:true
      });

      let random = Math.random().toString(36).substring(7);
      this.setState({
          captcha: random
      })

  }
    handleCaptcha(e){
      let userCaptcha = e.target.value
      if(!userCaptcha)
          return;
      this.setState({
          btnDisplay: false
      })

    }


  renderCaptcha(){
      return(
          <div>
              <Form.Group as={Row} controlId="formPlaintextEmail">
                  <Form.Label column sm="4">
                      {this.state.captcha}
                  </Form.Label>
                  <Col>
                      <Form.Control type="text" placeholder="Enter Captcha" onChange={this.handleCaptcha} />
                  </Col>
              </Form.Group>

              <Button variant="primary" type="save" disabled={this.state.btnDisplay} >
                  Login
              </Button>

          </div>
      )
  }

  render() {
    return (
        <Row>
          <Col>
            <Card style={{ width: '20rem' }}>
                <Card.Body>
                    <Form>
                        <Form.Group >
                            <Form.Label>Username</Form.Label>
                            <Form.Control type="username" placeholder="Enter username"
                                          onChange={this.handleUsername}
                            />
                        </Form.Group>

                        <Form.Group >
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" placeholder="Password"
                                          onChange={this.handlePassword}
                            />
                        </Form.Group>

                        <Button variant="primary" type="submit"
                                onClick={this.handleSubmit}
                        >
                            Submit
                        </Button>

                        {this.state.display? this.renderCaptcha():""}
                    </Form>

                </Card.Body>
            </Card>
          </Col>
        </Row>
    );
  }
}

export default App;
    

在上面的示例代码中，您已声明handleSubmit和handleCaptcha。在handleSubmit函数内部，有一个用于验证码的随机代码生成器。这会设置验证码状态，随后使用随机代码更新验证码输入标签。

handleCaptcha函数检查验证码文本输入中是否有任何值并启用登录按钮。

到目前为止，您已经了解了如何手动创建和设置输入值。最后，让我们确保用户输入的验证码值与给定的值相对应。

添加一个handleLogin函数，它将验证生成的值和用户输入。

      handleLogin()
    {
      if(this.state.userCaptcha === this.state.captcha){
          alert("correct captcha")
      }
      else{
          alert("incorrect captcha!!")
      }
    }
    

结论

在 React.js 中手动设置输入值使您能够操作输入表单并进一步根据需要设计应用程序。此技能主要由设计和开发用户界面的 React 和前端开发人员使用。

在本指南的基础上，学习如何在官方React.js 网站上创建表单输入。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光28609浏览1529