[英]I have buttons and a textbook in my React App, How do I make the click of the button trigger text input?
我有代表逻辑运算符的按钮。 为了这个例子,假设我有一个按钮,上面写着 +当我点击 + 按钮时,我想在文本框内看到一个 + 作为输入!
我提供了按钮组件和文本框组件的代码。 我总共有 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 } 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;
这是一个简化版本: https://codesandbox.io/s/autumn-glitter-y4fwt?file=/src/App.js
import React from "react";
import "./styles.css";
class App extends React.Component {
state = {
value: ""
};
handleChange = e => {
this.setState({ value: e.target.value });
};
plusOnClick = () => {
this.setState(state => ({
value: state.value + "+"
}));
};
render() {
return (
<div className="App">
<input
type="text"
onChange={this.handleChange}
value={this.state.value}
/>
<button onClick={this.plusOnClick}>+</button>
</div>
);
}
}
export default App;
本质上,您附加了一个 onClick function 来更新输入的 state 值。
下面是代码片段:
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>);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.