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

您只需要更改添加组件的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"));

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

关于CSS，您应该考虑将其外部化到.css / .scss文件中，这将使您的代码更简洁

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

1 个答案: