从反应天然组件中导出功能

Question

我只想将函数导出到action.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

您不能在类组件之外使用'此'关键字。您不能从班级外部更改组件的状态。

更多详细信息在这里：更改状态外部组件

此外，如果要更改类外部组件的状态，请使用redux状态。

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>
    );
  }
}