如何将反应组件状态从一个组件更新到另一个组件，并从任何组件调用任何函数答案

【问题标题】：How to update react component state from one component to another, and call any functions from any component如何将反应组件状态从一个组件更新到另一个组件，并从任何组件调用任何函数
【发布时间】：2021-09-07 15:55:20
【问题描述】：

我对反应很陌生，当我把所有东西都放在一个地方时，它工作得很好。但是当我把它拆分成组件时，一切都出错了。

我有两个文件 App.js 和 Activity1.js

Activity1.js 包含一个附加了事件处理程序的输入。这个输入被简单地包裹在一个 div 中。

输入最初在 App.js 中，但我将其提取到 Activity.js。

输入有一个兄弟，一个 div，我通过更新 props 状态来回显用户在输入中键入的任何内容。我怎样才能更新状态。感谢您的时间和兴趣。

这是我的代码：

App.js

import './App.css';
import React from 'react';
import Activity1 from './f/Activity1';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value:15};
  }
  checkInput = e => {
    this.setState({value: e.target.value});
  }
  render(){
    return (
      <div className="p-2">
        <div>
          <Activity1 />
        </div>
      </div>
    )
  }


}
export default App;

这里是 Activity1.js

import React from "react";
class Activity1 extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <div>Enter Number</div>
        <input className="form-control" onChange={this.checkInput} />
        <div className="p-2 mt-3">{this.state.value}</div>
      </div>
    )
  }
}
export default Activity1;

【问题讨论】：

标签： javascript html jquery css reactjs

【解决方案1】：

希望这能解决问题。

app.js

...
<Activity1 checkInput = {this.checkInput} inputValue = {this.state.value}/>
...

Activity1.js

...
render() {
    const {checkInput, inputValue} = this.props;
    ...
    <input className = "form-control" onChange = {checkInput} />
    <div className = "p-2 mt-3"> {inputValue} </div>

【讨论】：

【解决方案2】：

您可以将函数作为道具传递给其他组件。

<div>
      <Activity1 checkInput={this.checkInput} inputValue = {this.state.value}/>
</div>

在您的 Activity1 组件中，

const {checkInput, inputValue} = this.props;
onChangeEventHandler= () => {
    checkInput();
}

和

<input className = "form-control" onChange = ={this.onChangeEventHandler} />
<div className = "p-2 mt-3"> {this.inputValue} </div>

https://dev.to/vadims4/passing-down-functions-in-react-4618

【讨论】：

这对我来说很有意义，但是，它仍然没有解决问题。似乎 DOM 或 Virtual DOM 或其他任何东西都不知道在哪里找到值。我希望有一个积极的反应开发人员来实际尝试代码或场景。我真的很感谢您的意见。
@smacaz, ，我已经用您可以在 Activity1 组合中使用的代码更新了我的答案。希望这对您有所帮助。我现在无法编写确切的代码。无论如何，这只是 React.js 中的一个正常场景。所以希望这段代码对你有帮助。你也可以参考上面的链接。

【解决方案3】：

你可以使用回调函数

<Activity checkInput = {this.checkInput} inputValue = {this.checkInput.bind(this)}/>

【讨论】：