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

Question

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

<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

您只需更改 Add 组件的 css，将其设为 display: 'inline-block' 并删除其余部分。

这是repro on 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"));

对于文本框，我只将 Add 组件放在您的输入上方，因此它会按照您在问题中的要求显示在左侧。我还用 div 包装了它们以正确显示它们。

关于你的 css，你应该考虑将它外部化到一个 .css/.scss 文件中，它会让你的代码更干净