Как мне переместить мою кнопку рядом с текстовым полем?

Question

У меня есть компонент текстового поля, в который я импортировал кнопку «+» под названием «Добавить». Компонент кнопки «Добавить» находится в этом коде в этих тегах c.

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

Кнопка + находится прямо над текстовым полем, но я хочу, чтобы она находилась слева (и некоторые отступы)

Вот весь код для textbox.jsx (я использую React. js)

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 clickEvent={this.addTextBox}>+</Add>
    {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;

Код для добавления компонента (add.jsx)

import React, { Component } from "react";

class Add extends Component {
  state = {};
  render() {
return (
  <div
    className="App"
    style={{
      position: "absolute",
      left: "30%",
      top: "19%",
      transform: "translate(-50%, -50%)",
    }}
  >
    <button
      onClick={this.props.clickEvent}
      className={"btn btn-success btn-sm m-2 p-1 container"}
    >
      +
    </button>
  </div>
  );
 }
}

export default Add;

Answer 1

Вам просто нужно изменить css вашего компонента Add, сделать его display: 'inline-block' и удалить остальные.

Вот репродукция на Stackblitz и вот код :

Добавить компонент:

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"));

Для текстового поля я помещаю только компонент "Добавить" над вводом, чтобы он отображался слева, как вы задали в своем вопросе. Я также обернул оба div, чтобы они отображались правильно.

Что касается вашего css, вы должны подумать об экстернализации его в файле .css / .s css, это сделает ваш код чище