从反应原生组件中导出函数

Question

我只想将函数导出到 actions.js 文件，但我无法开始工作。 这是工作基地：

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
  }

  onOpen = () => {
    this.setState({visible:true});
    console.log(this.state.visible);
  }

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={()=>{this.onOpen();}}>More</Button>
      </View>
    );
  }
}

现在我尝试了这个，当我按下按钮时出现错误：

错误：

Unhandled JS Exception: _this.setState is not a function. (In '_this.setState({ visible: true })', '_this.setState' is undefined)

代码：

let onOpen = () => {
  this.setState({visible:true});
  console.log(this.state.visible);
}

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
    this.onOpen = onOpen.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={()=>{this.onOpen();}}>More</Button>
      </View>
    );
  }
}

Answer 1

您不能在类 Component 之外使用“this”关键字。您不能从类外部更改组件的状态。

更多细节在这里： Change state Outside Component

另外，如果你想在一个类之外改变组件的状态，使用redux state。

Redux JS

Answer 2

您的代码的问题是您在类之外定义了onOpen，并且您想访问组件的setState 函数。我不知道为什么要这样做，因为onOpen 属于类。但如果你想把这个放在课外。您可以通过以下方式做到这一点：

let onOpen = ({setState}) => {
  //retrieve setState here
  setState({visible:true});
}

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
    // You don't have to do this if onOpen is not in your class
    //this.onOpen = onOpen.bind(this);
  }

  render() {
    //send this.setState to onOpen
    const that = this;

    return (
      <View style={styles.container}>
        <Button onPress={()=>{onOpen({setState: that.setState});}}>More</Button>
      </View>
    );
  }
}