如何在 reactjs 中将 paddingTop 添加到我的输入框中？

Question

在 Reactjs 中，我有一个文本框组件和一个按钮。单击按钮时，它会创建一个新的文本框。我想要做的是，当创建新的文本框时，添加填充（特别是 paddingTop），这样它们就不会被附加。这是代码，更具体地说，<input>标签是我需要应用它的地方。import React, { Component } from "react";import Add from "./add/add";class Textbox extends Component {state = {boxtext: "",addBox: [],};handleChange = () => {// The line below creates a copy of the state, using the spread operatorlet fields = { ...this.state.boxtext };fields = fields + "+";this.setState({ fields });};//Handle box addition clickaddTextBox = () => {const boxAdded = [...this.state.addBox];boxAdded.push(1);this.setState({  addBox: boxAdded,});};render() {return (  <div    style={{      position: "absolute",      left: "50%",      top: "17%",      transform: "translate(-50%, -50%)",    }}    className="form-group"  >    <label for="exampleLogicSymbol">Logic Operator</label>    <input      type="text"      className="form-control"      id="exampleInputLogic"      aria-describedby="logicHelp"      placeholder="enter formula"      onChange={this.props.handleInput}      value={this.props.content}    />    <Add      className={"btn btn-success btn-sm m-2 p-1 container"}      clickEvent={this.addTextBox}    >      +    </Add>    {this.state.addBox.map(() => {      return (        <input          paddingTop          type="text"          className="form-control"          id="exampleInputLogic"          aria-describedby="logicHelp"          placeholder="ENTER"        />        //clickevent is made up name (property)      );    })}  </div>);}}export default Textbox;

Answer 1

在您的情况下，最简单的方法是将样式属性添加到您的输入中：

...

{this.state.addBox.map(() => {

      return (

        <input

          style={{ paddingTop: '15px' }} // <- right here

          type="text"

          className="form-control"

          id="exampleInputLogic"

          aria-describedby="logicHelp"

          placeholder="ENTER"

        />

        //clickevent is made up name (property)

      );

    })}

...