対応するネイティブコンポーネントから関数をエクスポートする

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

コンポーネント 'クラス'の外に 'this'キーワードを使用することはできません。クラスの外部からコンポーネントの状態を変更することはできません。ここ

詳細：あなたはクラスの外のコンポーネントの状態を変更したい場合は Change state Outside Component

また、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> 
    ); 
    } 
}