好的,正在开发我的第二个 React 应用程序。在这个项目中,我尝试使用嵌套组件(我的最后一个只有 1 个组件)。我有一个按钮组件,我试图在主应用程序组件中渲染它,它是一个计算器(这是我在本地节点/ react 中复制的设计:https://codepen.io/ryanmdoyle/pen/QBvjdw)
到目前为止,在我的代码中,我实际实现的唯一按钮是 AC 按钮。其他一切都是从我的 codepen 设计中复制/粘贴的。我知道 CSS 类和值等某些方面可以正确传递,因为它可以正确显示 CSS,但我试图获取 Button 组件的值并在 App 组件的方法中使用它。特别是在handleInput方法中。我知道通过输入字段您可以获得 event.target.value 但这显然不起作用!
import React, { Component } from 'react';
// import './App.css';
const Button = (props) => <button id={props.id} className={props.class} value={props.value} onClick={this.handleInput}>{props.value}</button>
class App extends Component {
constructor(props) {
super(props);
this.state = {
resultDisplay: "",
entryDisplay: "",
}
this.handleInput = this.handleInput.bind(this);
}
handleInput(event) {
console.log(event.target.value);
this.setState({
entryDisplay: this.state.entryDisplay + event.target.value
})
}
render() {
return (
<div className="grid-container">
<div className="display">display</div>
<Button id="clear" class={`button button-secondary`} value="ac" />
<div id="plus-min" className="button button-secondary">+/-</div>
<div id="percent" className="button button-secondary">%</div>
<Button id="one" class="button button-primary" value={1} />
<div id="two" className="button button-primary">2</div>
<div id="three" className="button button-primary">3</div>
<div id="four" className="button button-primary">4</div>
<div id="five" className="button button-primary">5</div>
<div id="six" className="button button-primary">6</div>
<div id="seven" className="button button-primary">7</div>
<div id="eight" className="button button-primary">8</div>
<div id="nine" className="button button-primary">9</div>
<div id="zero" className="button-primary">0</div>
<div id="divide" className="button button-operator">/</div>
<div id="multiply" className="button button-operator">*</div>
<div id="subtract" className="button button-operator">-</div>
<div id="add" className="button button-operator">+</div>
<div id="decimal" className="button button-primary">.</div>
<div id="equals" className="button button-operator">=</div>
</div>
);
}
}
export default App;
最佳答案
const Button = (props) => <button id={props.id} className={props.class} value={props.value} onClick={this.handleInput}>{props.value}</button>
您正在尝试添加一个不是 Button
本地的函数。
要使用它,您需要传递这样的函数
<Button id="clear" class={`button button-secondary`} value="ac" click={this.handleInput}/>
当您尝试使用 Button
中的功能时,请像这样使用它
const Button = (props) => <button id={props.id} className={props.class} value={props.value} onClick={() => props.click()}>{props.value}</button>
要记住的一件事是,默认情况下,箭头函数中的 this
为 null
。
您必须知道,当您尝试创建一个无状态或有状态与其功能集无关的组件时,变量必须是单独的。您不能像在这种情况下尝试过的那样使用它。 React 中的类几乎就像其他编程语言中的类一样。
关于javascript - React 中将子组件的值传递给父组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51507006/