时间戳

首页 > 解决方案 > React - 如何将变量分配给另一个组件类中的输入值？

javascript - React - 如何将变量分配给另一个组件类中的输入值？

问题描述

我目前正在使用 React 创建一个损坏计算器应用程序。我刚刚开始，所以请耐心等待。

这是我获取“Atk”输入值的代码。这目前在我的名为“CalculatorItems”的组件中：

class Atk extends Component {
constructor(props) {
    super(props);

    this.state = {stats: ''}

}

render() {
    return (
        <div>
            <label>PHY/MAG ATK</label><br/>
            <input  value={this.state.stats}
                    onChange={event => this.setState({stats: event.target.value})}
                    type="number"
            />
            <br/><br/>
        </div>
    )
}

}

现在我创建了一个函数，每当单击“计算损坏”按钮时都会调用它。在此函数中，我需要将变量“A”分配给上述“Atk”的输入值。这是在称为“计算器”的父组件中。

const damageCalc = () => {
        let A = (Class Atk's input value).

我的问题是我应该在括号中写什么，以便我可以将变量 A 分配给 Atk 的输入值/状态？会工作？

请记住，这是在另一个组件中，因为我需要将该函数应用于 CalculatorButton 的 onClick（CalculatorButton 是另一个子组件）。

标签： javascriptreactjs

解决方案

这种情况下的常见做法是将回调函数从父级传递给子级。在子元素上单击您触发该方法（从子元素）并将一些值作为参数传递（给父元素）比您在父元素中有回调实现并且可以对值执行任何操作。

如今，人们使用 Redux 或 Mobx 等状态管理器来处理（原文如此！）组件/应用程序的状态管理。但是正如您所说，您才刚刚开始，可能还有一段时间，直到您在项目中实施状态管理器:)

检查此链接：

React (JSX) 中的子级到父级通信没有通量

推荐阅读