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

Question

我目前正在使用 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 是另一个子组件）。

Answer 1

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

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

查看此链接：

Child to parent communication in React (JSX) without flux

Answer 2

您要么需要将 Atk 中的状态作为 props 传递给另一个组件，要么需要将状态提升到更高的组件，该组件可以将其传递给使用damageCalc 函数的任何组件。如果您选择后者，您会将 onChange 处理程序向下传递给 Atk。

Answer 3

最常见的方法是给你的子组件添加一个回调属性，这样它就可以通知父组件它的数据已经改变了。然后父组件可以用子组件的状态更新its状态。

例如，在您的Atk 组件中：

class Atk extends Component {
  constructor() {
    this.state = { stats: '' }
  }

  render() {
    return (
      <div>
        <label>PHY/MAG ATK</label><br/>
        <input  value={this.state.stats}
                onChange={event => {
                  const stats = event.target.value;
                  this.setState({ stats });
                  this.props.onValueChange(parseInt(stats, 10));
                }}
                type="number"
        />
        <br/><br/>
      </div>
    )
  }
}

...在父级中：

class DamageCalculator extends Component {
  constructor() {
    super();
    this.state = { atk: null };
  }

  calculateDmg() {
    return this.state.atk * foo; // or whatever the calculation is
  }

  render() {
    return (
      <div>
        <Atk onValueChange={ atk => this.setState({ atk }) }/>
      </div>
    );
  }
}

Answer 4

从子组件取回数据在 React 中并不常见。一般来说，我们将状态保存在父节点中，然后让子节点更新它。因此，将 state 属性和处理程序函数发送到您的子组件，然后通过此处理程序进行更新。因此，您的子组件可以是无状态的哑组件。使用此方法，您可以与许多子组件共享此状态。

class App extends React.Component {
  state = {
    stats: "",
  };

  handleCange = e => this.setState( { stats: e.target.value } );
  damageCalc = () => console.log( this.state.stats );

  render() {
    return (
      <div>
        <Atk onChange={this.handleCange} stats={this.state.stats} />
        <CalculatorButton onClick={this.damageCalc} />
      </div>
    );
  }
}

const Atk = ( props ) => {
  const { stats, onChange } = props;
  return (
    <div>
      <label>PHY/MAG ATK</label><br />
      <input
        value={stats}
        onChange={onChange}
        type="number"
      />
      <br /><br />
    </div>
  );
};

const CalculatorButton = props => (
  <button onClick={props.onClick}>Click</button>
);

ReactDOM.render( <App />, document.getElementById( "root" ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>