如何使用另一个文件中的按钮组件？

Question

我有一个名为 Add 的按钮组件来自一个名为 add.jsx 的文件，它只是一个“+”按钮。

我现在有一个名为 textbox.jsx 的文件。 “+”按钮创建一个新的文本框。目前 + 按钮不是我的 Add 组件。 我不知道如何引用 add 组件使其成为主按钮。

这是我的 textbox.jsx 代码

import React, { Component } from "react";

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}
    />
    <button onClick={this.addTextBox}>+</button>
    {this.state.addBox.map(() => {
      return (
        <input
          type="text"
          className="form-control"
          id="exampleInputLogic"
          aria-describedby="logicHelp"
          placeholder="ENTER"
        />
      );
    })}
  </div>
 );
 }
}

export default Textbox;

这是我的添加组件代码：

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.handleAddSymbol}
      className={"btn btn-success btn-sm m-2 p-1 container"}
    >
      +
    </button>
  </div>
    );
  }
}

export default Add;

感谢您的任何回复，我是初学者:)

Answer 1

您应该在 textbox.jsx 文件上更改 2 项内容，并在 add.jsx 文件中添加一个函数。 首先在 textbox.jsx 顶部导入“add.jsx”文件（使用正确的路径名）。

import AddButton from "add.jsx";

您应该使用 AddButton 标签更改按钮标签：

<AddButton handleAddSymbol={this.addTextBox}></AddButton>

您可以将函数和变量与该系统的主文件和扩展文件绑定。 handleAddSymbol={this.addTextBox} 意味着您在 add.jsx 中有一个名为“handleAddSymbol”的函数，在 textbox.jsx 文件中有一个名为“addTextBox”的函数。您应该在 add.jsx 文件中创建 handleAddSymbol 函数并将 this.props.addTextBox() 函数调用到该函数中：

handleAddSymbol= () => {
  this.props.addTextBox();
};