亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 reactjs 中將 paddingTop 添加到我的輸入框中?

如何在 reactjs 中將 paddingTop 添加到我的輸入框中?

慕桂英4014372 2022-11-11 11:00:20
在 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;
查看完整描述

1 回答

?
慕虎7371278

TA貢獻1802條經驗 獲得超4個贊

在您的情況下,最簡單的方法是將樣式屬性添加到您的輸入中:


...

{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)

      );

    })}

...


查看完整回答
反對 回復 2022-11-11
  • 1 回答
  • 0 關注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號