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中的状态传递给道具，要么需要将该状态提升到一个更高的组件，以便可以将其传递给使用DamageCalc函数的任何组件。如果选择后者，则将把onChange处理程序传递给Atk。

Answer 3

最常见的方法是在子组件中添加一个回调道具，以便它可以通知 parent 组件其数据已更改。然后，父组件可以用孩子的状态更新其状态。

例如，在您的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>

React-如何在另一个Component的类中为输入值分配变量？

4 个答案: