Javascript 如何将按钮移动到文本框旁边？

这里有一个文本框组件，我在其中导入了一个名为Add的“+”按钮。添加按钮组件可以在这些特定标记的代码中找到

<Add clickEvent={this.addTextBox}>+</Add>

+

直接在文本框顶部出现+按钮，但我希望它在左侧（和一些填充）

以下是textbox.jsx的所有代码（我使用的是React.js）

import React，{Component}来自“React”；
从“/Add/Add”导入Add；
类Textbox扩展组件{
状态={
文本框：“”，
地址框：[]，
};
handleChange=（）=>{
//下面的行使用spread操作符创建状态的副本
让字段={…this.state.boxtext}；
字段=字段+“+”；
this.setState（{fields}）；
};
//句柄框添加单击
addTextBox=（）=>{
const-boxAdded=[…this.state.addBox]；
添加了boxed.push（1）；
这是我的国家({
addBox:boxAdded，
});
};
render（）{
返回(
逻辑运算符
+
{this.state.addBox.map（（）=>{
返回(
//clickevent由名称（属性）组成
);
})}
);
}
}
导出默认文本框；

添加组件的代码（Add.jsx）

import React，{Component}来自“React”；
类添加扩展组件{
状态={}；
render（）{
返回(
+
);
}
}
导出默认添加；

您只需更改Add组件的css，使其

显示：“内联块”

并删除其余部分

这是密码，这是代码：

添加组件：

import React, { Component } from "react";

class Add extends Component {
  state = {};
  render() {
return (
  <div
    className="App"
    style={{
      display: 'inline-block',
    }}
  >
    <button
      onClick={this.props.clickEvent}
      className={"btn btn-success btn-sm m-2 p-1 container"}
    >
      +
    </button>
  </div>
  );
 }
}

export default Add;

import React, { Component } from "react";
import Add from "./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>
        <div>
          <Add clickEvent={this.addTextBox}>+</Add>
          <input
            type="text"
            className="form-control"
            id="exampleInputLogic"
            aria-describedby="logicHelp"
            placeholder="enter formula"
            onChange={this.props.handleInput}
            value={this.props.content}
          />
        </div>

        {this.state.addBox.map(() => {
          return (
            <input
              type="text"
              className="form-control"
              id="exampleInputLogic"
              aria-describedby="logicHelp"
              placeholder="ENTER"
            />
            //clickevent is made up name (property)
          );
        })}
      </div>
    );
  }
}

export default Textbox;

import React, { Component } from "react";
import { render } from "react-dom";
import Textbox from './textbox';
import "./style.css";

const App = () => {
  return (
    <div>
      <Textbox />
    </div>
  );
};

render(<App />, document.getElementById("root"));

import React，{Component}来自“React”；
类添加扩展组件{
状态={}；
render（）{
返回(
+
);
}
}
导出默认添加；

文本框组件：

import React, { Component } from "react";

class Add extends Component {
  state = {};
  render() {
return (
  <div
    className="App"
    style={{
      display: 'inline-block',
    }}
  >
    <button
      onClick={this.props.clickEvent}
      className={"btn btn-success btn-sm m-2 p-1 container"}
    >
      +
    </button>
  </div>
  );
 }
}

export default Add;

import React, { Component } from "react";
import Add from "./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>
        <div>
          <Add clickEvent={this.addTextBox}>+</Add>
          <input
            type="text"
            className="form-control"
            id="exampleInputLogic"
            aria-describedby="logicHelp"
            placeholder="enter formula"
            onChange={this.props.handleInput}
            value={this.props.content}
          />
        </div>

        {this.state.addBox.map(() => {
          return (
            <input
              type="text"
              className="form-control"
              id="exampleInputLogic"
              aria-describedby="logicHelp"
              placeholder="ENTER"
            />
            //clickevent is made up name (property)
          );
        })}
      </div>
    );
  }
}

export default Textbox;

import React, { Component } from "react";
import { render } from "react-dom";
import Textbox from './textbox';
import "./style.css";

const App = () => {
  return (
    <div>
      <Textbox />
    </div>
  );
};

render(<App />, document.getElementById("root"));

import React，{Component}来自“React”；
从“/Add”导入Add；
类Textbox扩展组件{
状态={
文本框：“”，
地址框：[]
};
handleChange=（）=>{
//下面的行使用spread操作符创建状态的副本
让字段={…this.state.boxtext}；
字段=字段+“+”；
this.setState（{fields}）；
};
//句柄框添加单击
addTextBox=（）=>{
const-boxAdded=[…this.state.addBox]；
添加了boxed.push（1）；
这是我的国家({
addBox:boxAdded
});
};
render（）{
返回(
逻辑运算符
+
{this.state.addBox.map（（）=>{
返回(
//clickevent由名称（属性）组成
);
})}
);
}
}
导出默认文本框；

应用程序组件：

import React, { Component } from "react";

class Add extends Component {
  state = {};
  render() {
return (
  <div
    className="App"
    style={{
      display: 'inline-block',
    }}
  >
    <button
      onClick={this.props.clickEvent}
      className={"btn btn-success btn-sm m-2 p-1 container"}
    >
      +
    </button>
  </div>
  );
 }
}

export default Add;

import React, { Component } from "react";
import Add from "./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>
        <div>
          <Add clickEvent={this.addTextBox}>+</Add>
          <input
            type="text"
            className="form-control"
            id="exampleInputLogic"
            aria-describedby="logicHelp"
            placeholder="enter formula"
            onChange={this.props.handleInput}
            value={this.props.content}
          />
        </div>

        {this.state.addBox.map(() => {
          return (
            <input
              type="text"
              className="form-control"
              id="exampleInputLogic"
              aria-describedby="logicHelp"
              placeholder="ENTER"
            />
            //clickevent is made up name (property)
          );
        })}
      </div>
    );
  }
}

export default Textbox;

import React, { Component } from "react";
import { render } from "react-dom";
import Textbox from './textbox';
import "./style.css";

const App = () => {
  return (
    <div>
      <Textbox />
    </div>
  );
};

render(<App />, document.getElementById("root"));

import React，{Component}来自“React”；
从“react dom”导入{render}；
从“./Textbox”导入Textbox；
导入“/style.css”；
常量应用=（）=>{
返回(
);
};
render（，document.getElementById（“根”））；

对于文本框，我只将Add组件放在您的输入上方，以便它在您提问时显示在左侧。我还用一个div将它们包装起来，以正确显示它们

---

关于css，您应该考虑将其外部化到.css/.scss文件中，通过简单的按钮替换

Add

组件，该按钮将显示在文本框旁边，从而使代码更干净。您可能有一些代码使其显示为

display:block

，或者是一个

包装您的

Add

组件，或者是内部的一些css。如果您需要更多帮助，请提供

Add

组件的代码。我提供了Add组件的代码。我不想用一个简单的按钮来代替它，我现在该如何改变它呢？谢谢你的建议，但你不是真的感兴趣，但你仍然可以在这里问你所有的问题，社区很好，会帮助你的。我不是唯一的一个，如果你的问题与这个问题相同，你会很快得到答案；）如果你需要一个快速的审查，我仍然可以看看它，如果你有回购协议提供