Question

我有两个react组件，我想调用setState在一个Component中设置一个状态，但在另一个中调用。我该怎么办？

Answer 1

您不能直接从子组件上调用父组件上的setState，因为组件状态的更新仅限于当前组件。

要处理此问题，只需将父函数传递给包含setState的子函数。因此，当您想更新父级的状态时，只需调用该传递的函数即可。

一个最小的例子：

// Parent.jsx

import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  constructor(props) {
    super(props);
    this.setChanged = this.setChanged.bind(this);
    this.state = {
      changed: false
    }
  }

  // Function to set the parent's state
  setChanged() {
    this.setState({ changed: true });
  }

  render() {
    return <Child setChanged={this.setChanged} />
  }
}

// Child.js

import React from 'react';

function Child(props) {
  return (
    // When clicked, parent's setChanged function is called
    <div onClick={() => props.setChanged()} />
  )
}

Answer 2

请参阅以下示例。不要害怕使用包含某些逻辑或函数调用的处理程序（方法）。这有助于保持代码的可维护性。

for sac in $event/*R.sac; do
    ***preprocess the data***

    read -p "Is this a good SKS event? Type 'q1' for a really good event, 'q2' for an okay event, 'ns' for a null split, or 'be' for a bad event:   " -n 2  answer
    echo
    case "$answer" in
        q1 )
            echo -e "\nVery good event chosen\n"
            if [[ ! -e $q1/$goodstat && ! -e $q2/$goodstat ]]; then
                mkdir -p $q1/$goodstat
                mkdir -p $q2/$goodstat
                echo "$goodstat created in $q1 and $q2"
            else
                echo "$goodstat exists in $q1 and $q2"
            fi
            cp -a $event/*$sacname*[R,T].sac $q1/$goodstat
            cp -a $event/*$sacname*[R,T].sac $q2/$goodstat

            ;;
        q2 )
            if [[ ! -e $q2/$goodstat ]]; then
                mkdir -p $q2/$goodstat
                echo "$goodstat created in $q2"
            else
                echo "$goodstat exists in $q2"
            fi
            cp -a $event/*$sacname*[R,T].sac $q2/$goodstat

            ;;
        ns )
            echo -e "\nNull Split chosen\n"
            if [[ ! -e $null/$goodstat ]]; then
                mkdir -p $null/$goodstat
                echo "$goodstat created in $null"
            else
                echo "$goodstat exists in $null"
            fi
            cp -a $event/*$sacname*[R,T].sac $null/$goodstat

            ;;
        be )
            echo -e "\nBad event chosen\n"
            conditional=true
            ;;
        * )
            echo -e "\nWrong input\n"
            ;;          
        esac
    done
done

如何从ReactJs中的另一个组件调用setState

2 个答案: