如何在 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 operator

let fields = { ...this.state.boxtext };

fields = fields + "+";

this.setState({ fields });

};

//Handle box addition click

addTextBox = () => {

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(() => {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ paddingTop: '15px' }} // <- right here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="form-control"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="exampleInputLogic"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aria-describedby="logicHelp"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="ENTER"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; //clickevent is made up name (property)&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; })}...