Reactjs

Question

私の親クラスが2人の子供

カウンターコンポーネントは、秒単位で増分状態「カウンタ」を持っている別の子コンポーネントの状態を変更します。 Buttonコンポーネントで

class Counter extends Component { 

    constructor(props) { 
     super(props) 
     this.resetCount = this.resetCount.bind(this); 
     this.state = { 
      count : 0 
     } 
    } 

    resetCount() { 
     this.setState({ 
      count : 0 
     }); 
    } 

    componentDidMount() { 
     setInterval(() => { 
      this.setState({ 
       count: this.state.count + 1 
      }); 
     }, 1000); 
    } 

    render() { 
     const {count} = this.state; 
     const {color,size} = this.props; 
     return (
      <Text style={{color, fontSize: size}}>{count}</Text>  

      ); 
    } 
} 

、私は私のメインの親クラスのたonPress事

<Button 
     onPress={resetCount} 
     title="Reset COunt" 
     color="#841584"   
    /> 

を持っている私は

<Counter color={'green'} size={90} /> 
    <Button/> 

をレンダリングしかし、私は「エラー をすることはできません取得していますApp.jsの変数resetCountを見つける

Answer 1

'ボタン'を使用する際には 'this.resetCount'を使用する必要があります。デCounter.render（）

<Button 
    onPress={this.resetCount} 
    title="Reset COunt" 
    color="#841584"   
/> 

述べたようにボタンは、独自のコンポーネントである場合は、機能たonPress

コンポーネントボタン

<Button onPress={this.props.onResetCount} ... /> 

コンポーネントカウンター

render(){ 
    return (
      <Text style={{color, fontSize: size}}>{count}</Text>  
      <Button onResetCount={this.resetCount} title="Reset Count" color="... /> 
      ); 
    ) 
} 

を継承しなければなりません詳細：https://reactjs.org/docs/faq-functions.html

Answer 2

これは、ボタンが兄弟カウンターコンポーネント内のクラスメソッドにアクセスできないためです。共有メソッドを親コンポーネントに移動することで、コードを少し再編成すれば、a）必要なものを実現し、b）コードを少し簡単にすることができます。言い換えれば、カウンターを2つの小さなダムコンポーネント/純粋な関数で構成された主要コンポーネントにします。

// No need for a component, just a function that returns 
// a styled div 
function Text({ count }) { 
    return <div>{count}</div>; 
} 

// Another function to return a button 
function Button({ resetCount, text }) { 
    return <button onClick={resetCount}>{text}</button>; 
} 

// The main component that keeps the state which it passes 
// to the dumb Text component 
class Counter extends React.Component { 

    constructor() { 
    super() 
    this.state = { count: 0 }; 
    this.resetCount = this.resetCount.bind(this); 
    } 

    componentDidMount() { 
    setInterval(() => { 
     this.setState({ 
     count: this.state.count + 1 
     }); 
    }, 1000); 
    } 

    resetCount() { 
    this.setState({ count: 0 }); 
    } 

    render() { 
    return (
     <div> 
     <Text count={this.state.count} /> 
     <Button resetCount={this.resetCount} text="Reset count" /> 
     </div> 
    ) 
    } 
} 


ReactDOM.render(
    <Counter />, 
    document.getElementById('container') 
); 

DEMO

Answer 3

あなたはonPress={resetCount}をこの方法で行うことができないので、あなたは、エラーが発生します。変数を検索しています。しかし、あなたは変数を持っていません、それは関数です。したがって、resetCount()にアクセスする場合は、this.resetCountを使用してください。

は、ここでは、子コンポーネントのボタンから、あなたの親コンポーネントの機能にアクセスする方法の例です：

// Parent component: 
resetCount() { 
    // your code 
} 
render() { 
    return(
    <Button resetCount={this.resetCount} /* your other stuff */ /> 
); 
} 

// Button component: 
<button onPress={this.props.resetCount}>Click me</button> 

注：あなたは兄弟をこのように更新することはできません。機能を<Counter/>から親コンポーネントに移動する必要があります。