Javascript 在Reactjs中动态显示从一个状态到另一个状态的值

我有四个组件，分别命名为UserHome、SearchFlight、Events和Alerts

我得到了UserHome组件，在这里我导入了所有组件

<SearchFlight/>
<Events />
<Alerts />

在SearchFlight中，我有一个带有两个输入和一个按钮的表单。当我单击按钮时，我调用了一个函数，该函数将为我提供的相应输入计算一些JSON值（事件、警报数组），然后我希望在事件和警报组件中动态注入这些输入

constructor() {
        super();
        this.state = {
            open: false,
            airport: '',
            search_flight_no: '',
        };

      }

handleSubmit= event =>{
        event.preventDefault();

        var airportValueSelected= this.state.airport;
        var flightValue= this.state.search_flight_no;
        var airportList= FlightInfo.Airport;
        for(var rootKey in airportList){
          if(rootKey===airportValueSelected)
           {

               airportList[rootKey].forEach(element => {


                   if(element.flight_no===flightValue){

                    for(var m=0;m<element.Events.length;m++){

                     var singleEvent={
                       event_name:'',
                       date_time:'',
                     };

                      singleEvent.event_name=element.Events[m].event_name;
                      singleEvent.date_time=element.Events[m].date_time;
                      this.state.events.push(singleEvent);
                    }

                    for(var s=0;s<element.Alerts.length;s++){

                      this.state.alerts.push(element.Alerts[s]["Alert"+(s+1)]);

                    }

                   }
                   // Here I am getting both events and alerts arrays
               });
               if(this.state.events.length<1 && this.state.alerts.length<1){
                this.setState({ open: true });
               }
               else{

               }


           }
        }

constructor（）{
超级（）；
此.state={
开：错，
机场：''，
搜索航班号：''，
};
}
handleSubmit=事件=>{
event.preventDefault（）；
var airportValueSelected=this.state.airport；
var flightValue=this.state.search\u flightValue\u no；
var airportList=FlightInfo.Airport；
for（airportList中的var rootKey）{
如果（rootKey==airportValueSelected）
{
airportList[rootKey].forEach（元素=>{
if（元素飞行号===飞行值）{
对于（var m=0；m使用react原理，您应该让
UserHome
拥有全局状态并将其传递给其子级（其他3个组件）。此外，当SearchFlight返回提交时，UserHome应该将函数传递给
SearchFlight

然后，此函数将更新UserHome的状态，并允许其子级拥有更新的数据

例如：

class UserHome extends Component {
  state = {
    events: []
  }

  addEvent = newEvent => this.setState(state => {
    const {events} = this.state
    return [...events, newEvent]
  })

  render() {
    const {events} = this.state
    return (
      <>
        <SearchFlight events={events} addEvent={this.addEvent} />
        <Events events={events} />
        <Alerts events={events} />
      </>
    )
  }
}


class SearchFlight extends Component {
  handleSubmit = () => {
    const {addEvent} = this.props

    // create a new event here
    // const myNewEvent = {...}

    addEvent(myNewEvent)
  }
  render() {
    const {events} = this.props
    return (
      <button onClick={this.handleSubmit} />
    )
  }
}

类UserHome扩展组件{
状态={
事件：[]
}
addEvent=newEvent=>this.setState（状态=>{
const{events}=this.state
返回[…事件，newEvent]
})
render（）{
const{events}=this.state
返回(
)
}
}
类SearchFlight扩展组件{
handleSubmit=（）=>{
const{addEvent}=this.props
//在此处创建新事件
//const myNewEvent={…}
addEvent（myNewEvent）
}
render（）{
const{events}=this.props
返回(
)
}
}

我已经在UserHome中声明并初始化了事件和警报的状态，但是如何将其传递给另一个组件，其次是我在单击按钮时调用的函数，而该按钮不在UserHome中。在react中，您通过道具（数据或函数）传递所有内容。我编辑了答案，向您展示了一个示例SetEvents，用于在UserHome状态下设置事件，类似于我在SearchFlight中需要的setAlerts。令人困惑的是，为什么在SearchFlight中有const事件，以及如何在花括号中声明它，最后在SearchFlight中这是什么。props表示我想设置我检索到的值om JSONI认为您可以直接在React文档中找到更完整的答案，尤其是关于这两个链接：和。第一个链接将解释如何将数据从组件传递给其子组件。第二个链接将解释如何将数据从子组件传递给其父组件。好的，但如果我在SearchFlight中使用您的代码，则表示newEvents不是d定义

class UserHome extends Component {
  state = {
    events: []
  }

  addEvent = newEvent => this.setState(state => {
    const {events} = this.state
    return [...events, newEvent]
  })

  render() {
    const {events} = this.state
    return (
      <>
        <SearchFlight events={events} addEvent={this.addEvent} />
        <Events events={events} />
        <Alerts events={events} />
      </>
    )
  }
}


class SearchFlight extends Component {
  handleSubmit = () => {
    const {addEvent} = this.props

    // create a new event here
    // const myNewEvent = {...}

    addEvent(myNewEvent)
  }
  render() {
    const {events} = this.props
    return (
      <button onClick={this.handleSubmit} />
    )
  }
}