REACT: Использовать setState в функции, вызываемой из другого компонента? - PullRequest
Новая
       8

REACT: Использовать setState в функции, вызываемой из другого компонента?

0 голосов
/ 22 декабря 2018

Я начинаю в ReactJS и создаю систему оценок для своей игры в React.

Я использовал компонент под названием Score для управления им.

Я сделал оценку в состоянии, которое можно увеличить на increment().

Проблема в том, что я хотел бы использовать эту функцию из моего компонента приложения (для примера я создал incrementScore(), чтобы показать его).

Однако мой increment() не можетполучить доступ к this.setState() при вызове функции из другого компонента.

Обратите внимание, что внутри Score.js я создал кнопку «Увеличение», которая использует increment(), и она отлично работает.

У вас есть решение или вы могли бы просто дать подсказку?Спасибо!

App.js: 

import Score from './Score'

class App extends React.Component {

  incrementScore() {
    Score.prototype.increment()
  }

  render() {
    return (
        <div>
          <h1 id="title">Game</h1>
          <Score />
          <Canvas /> {/*Not important here, just for the game*/}
        </div>
    )
  }
}

export default App

Score.js: 

import React from 'react'

class Score extends React.Component {

  constructor() {
    super()
    this.state = {
      score: 0
    }
    this.increment = this.increment.bind(this)
  }

  increment() {
    this.setState({
      score: this.state.score + 1 //this.state.score + 1
    })
  }

  render() {
    return (
      <div>
        <p id="score">Score: {this.state.score}</p>
        <button>Incrementer</button>
      </div>
    )
  }
}

export default

1 Ответ

0 голосов
/ 22 декабря 2018

Как уже упоминал Робин, просто переместите свое состояние в родительский компонент App, и пусть ваш компонент Score будет компонентом без сохранения состояния.Кроме того, обязательно передайте функцию приращения вниз как опору и используйте ее в своей кнопке как функцию onClick. 

class App extends React.Component {
constructor() {
    super()
    this.state = {
      score: 0
    }
    this.increment = this.increment.bind(this)
  }

  increment() {
    this.setState({
      score: this.state.score + 1 //this.state.score + 1
    })
  }

  render() {
    return (
      <div>
        <h1 id="title">Game</h1>
        <Score scoreCount={this.state.score} increment={this.increment}/>
      </div>
    )
  }
}
const Score = props =>
      <div>
        <p id="score">Score: {props.scoreCount}</p>
        <button onClick={props.increment}>Incrementer</button>
      </div>

См. Живой пример здесь: https://codesandbox.io/s/wq4kqqz0mw

...