0

Это главный компонент

import React, { Component } from 'react';
import Button from './Button'
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      pokemons: []
    }
  }

  componentDidMount() {
    const pokemonUrl = "http://localhost:4000/pokemons";
    fetch(pokemonUrl)
      .then(response => response.json())
      .then(data => {
        this.setState({ 
          pokemons: data,
          src: pic
        });
      })
  }



  render() {
    return (

      <div className="App">
        <ul>
          {
            this.state.pokemons.map(pokemon => {
              return ( 
                <li className="pokemonList" checked={this.state.checked} key={pokemon.id}>
                Name: {pokemon.name}
                <br></br>
                <img src={'this.props.src'} alt="sd"></img>
                Id: {pokemon.id}<br></br>
                State: {this.state.checked}
                <Button />
                </li>
              )
            })
          }
        </ul>
      </div>
    );
  }
}

export default App;

Это кнопка

import React, { Component, Fragment } from 'react'


    export default class Button extends Component {


constructor(props) {
        super(props);
        this.state = {
            checked: false
        }
        this.handleClicked = this.handleClicked.bind(this)
    }
    handleClicked() {
        this.setState((state) => ({
          checked: !this.props.checked
        })
        )
    }

render() {
    return (
        <Fragment>
            <button onClick={this.handleClicked}>Check</button>
        </Fragment>
    )
}
}

Суть вопроса в том что в кнопки меняется состояние Checked только один раз, но хочу сделать чтобы изменялось постоянно, т.е. изначально Checked = false, затем при нажатии checked = true, а после ещё одного нажатия false; а также чтобы я мог явно передать этот checked в другой компонент. P.S. Недавно начал изучать React, также буду рад любым советам по изучению

1

1 ответ 1

0

this.STATE.checked

handleClicked() {
  this.setState({
    checked: !this.state.checked
  });
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.