在 React 中创建垂直步进器

在 React 中创建一个垂直的步进器可以让用户方便地选择数字或值。本文将介绍如何使用 React 和 CSS 来确保步进器实现在不同屏幕尺寸下的正确显示。

步进器组件

首先，我们需要创建一个 React 组件来实现垂直步进器。该组件将具有一个文本框和两个按钮，用户可以使用按钮来递增或递减该文本框中的数字。此外，我们还将添加 PropTypes 属性来确保正确地传递参数。下面是一个简单的步进器组件示例：

import React from 'react';
import PropTypes from 'prop-types';

class VerticalStepper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.defaultValue,
    };
  }

  handleIncrement = () => {
    const { value } = this.state;
    const { step } = this.props;
    this.setState({ value: value + step });
  };

  handleDecrement = () => {
    const { value } = this.state;
    const { step } = this.props;
    this.setState({ value: value - step });
  };

  render() {
    const { value } = this.state;
    return (
      <>
        <button onClick={this.handleIncrement}>+</button>
        <input type="text" value={value} readOnly />
        <button onClick={this.handleDecrement}>-</button>
      </>
    );
  }
}

VerticalStepper.propTypes = {
  defaultValue: PropTypes.number.isRequired,
  step: PropTypes.number.isRequired,
};

在这个组件中，我们使用了类组件的构造器来设置初始状态。此外，我们还使用了两个处理函数来处理递增和递减的操作。在渲染函数中，我们使用文本框来展示当前的值，并通过两个按钮来触发相应的递增或递减操作。我们还使用了 PropTypes 来确保传递参数的类型是正确的。

CSS 样式

为了使步进器位于屏幕中心，并在不同的设备上正确显示，我们需要使用一些 CSS 样式。下面是一个垂直步进器的 CSS 示例：

.wrapper {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.button {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}

.input {
  font-size: 16px;
  width: 50px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

在这个样式中，我们使用了绝对定位以及 translateY 属性来将步进器在屏幕中心。此外，我们还使用了按钮样式和文本框样式。

将组件和样式组合在一起

现在，我们可以将组件和样式组合在一起，创建一个完整的垂直步进器。下面是一个完整的组件示例：

import React from 'react';
import PropTypes from 'prop-types';
import './styles.css';

class VerticalStepper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.defaultValue,
    };
  }

  handleIncrement = () => {
    const { value } = this.state;
    const { step } = this.props;
    this.setState({ value: value + step });
  };

  handleDecrement = () => {
    const { value } = this.state;
    const { step } = this.props;
    this.setState({ value: value - step });
  };

  render() {
    const { value } = this.state;
    return (
      <div className="wrapper">
        <button className="button" onClick={this.handleIncrement}>
          +
        </button>
        <input className="input" type="text" value={value} readOnly />
        <button className="button" onClick={this.handleDecrement}>
          -
        </button>
      </div>
    );
  }
}

VerticalStepper.propTypes = {
  defaultValue: PropTypes.number.isRequired,
  step: PropTypes.number.isRequired,
};

export default VerticalStepper;

现在，我们可以在 React 应用程序中使用这个步进器组件了。

结论

本文介绍了如何使用 React 和 CSS 创建一个垂直步进器。我们首先创建了一个步进器组件，然后添加了样式以确保它正确地显示在不同设备上。通过将组件和样式组合在一起，我们创建了一个完整的步进器组件。