Javascript 我的React应用程序中有按钮和教科书，如何使按钮的点击触发文本输入？

我有代表逻辑运算符的按钮。在本例中，假设我有一个按钮+ 单击+按钮时，我希望看到文本框中的+作为输入

我提供了按钮组件和文本框组件的代码。我总共有7个按钮组件

我意识到有些东西必须是onClick（我的代码不正确，只是一个占位符）

按钮：

import React, { Component } from "react";

//logic operator buttons
class Logic extends Component {
    state = {};

render() {
return (
  <div
    style={{
      position: "absolute",
      left: "10%",
      top: "20%",
      transform: "translate(-50%, -50%)",
    }}
  >
    <button
      onClick={this.handleIncrement}
      className={"btn btn-primary btn-sm m-2 p-1"}
    >
      ¬
    </button>
  </div>
);
  }
}

export default Logic;

import React，{Component}来自“React”；
//逻辑运算符按钮
类逻辑扩展组件{
状态={}；
render（）{
返回(
¬
);
}
}
导出缺省逻辑；

文本框：

import React, { Component } from "react";

class Textbox extends Component {
  state = {};
  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"
    ></input>
  </div>
    );
  }
}

export default Textbox;

import React，{Component}来自“React”；
类Textbox扩展组件{
状态={}；
render（）{
返回(
逻辑运算符
);
}
}
导出默认文本框；

这里有一个简化版本：

从“React”导入React；
导入“/styles.css”；
类应用程序扩展了React.Component{
状态={
值：“”
};
handleChange=e=>{
this.setState（{value:e.target.value}）；
};
plusOnClick=（）=>{
this.setState（state=>({
值：state.value++”
}));
};
render（）{
返回(
+
);
}
}
导出默认应用程序；

---

实际上，您附加了一个onClick函数来更新输入的状态值。

下面是代码片段：

import React, { Component } from "react";

class Logic extends Component {

constructor(){
   this.state={
   value:""
   }

handleIncrement(value)
{
this.setState({
   value:value
             });
}

    render(){
    var Value="¬";
    return(
    <div>
    The value is: {this.state.value}
   
       <button>
        onClick={()=>{this.handleIncrement(Value)}}
        className={"btn btn-primary btn-sm m-2 p-1"}>
        {Value}
       </button>

    </div>);
    }
 }

import React，{Component}来自“React”；
类逻辑扩展组件{
构造函数（）{
这个州={
值：“”
}
手动增量（值）
{
这是我的国家({
价值：价值
});
}
render（）{
var值=“”；
返回(
值为：{this.state.value}
onClick={（）=>{this.handleIncrement（Value）}
className={“btn btn主btn sm-2 p-1”}>
{Value}
);
}
}

Hello！这在一定程度上起到了作用，但如何使+显示在现有的文本框（另一个组件）上与其制作一个新的文本框，不如说我很抱歉，如果这很明显，但我是一个初学者！这取决于你的组件层次结构是如何设置的。明白了，但是我必须在我的button.jsx文件中引用另一个文件textbox.jsx吗？这是我不明白的！button是你在文本框组件中使用的组件吗？如果是，你会这么做的像上面一样构造文本框，但将“plusOnClick”作为道具传递到按钮组件中。

import React, { Component } from "react";

class Logic extends Component {

constructor(){
   this.state={
   value:""
   }

handleIncrement(value)
{
this.setState({
   value:value
             });
}

    render(){
    var Value="¬";
    return(
    <div>
    The value is: {this.state.value}
   
       <button>
        onClick={()=>{this.handleIncrement(Value)}}
        className={"btn btn-primary btn-sm m-2 p-1"}>
        {Value}
       </button>

    </div>);
    }
 }