javascript - 如何在 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;

标签： javascriptcssreactjs

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)
      );
    })}
...