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

Posted 2023-02-22

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

【英文标题】：React - How do I assign a variable to the input value in another Component's class? [duplicate]

【发布时间】：2019-02-24 04:40:03

【问题描述】：

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

【问题讨论】：

将stats 状态提升到父级，让子级通过处理函数更新此值。

【参考方案1】：

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

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

查看此链接：

Child to parent communication in React (JSX) without flux

【参考方案2】：

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

【参考方案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>
    );
  

【讨论】：

谢谢，有道理。我重新编辑了我的代码，但是现在每当我启动页面时，calculateDmg() 都会运行。我希望它仅在单击计算损坏按钮时运行。我将如何做到这一点？

我建议单独提问，因为它与第一个问题无关。祝你好运！

【参考方案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>