@Naislymon

Как передать функцию, чтобы заработал онклик в react?

Есть два компонента, один App, где я рендерю фигуры с помощью второго. Есть 3 фигуры, и нужно при нажатии на любую фигуру, выводить ее выше в отдельный див, нажал на фигуру - она вывелась и так бесконечно. Что дописать в Figure, чтобы он начал работать верно?

export default class Figure extends React.Component {
  render(props) {
    return <div onClick={this.props.change} className={this.props.type} />
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
      figure: [],
      index: 0,
    }
    this.change = this.change.bind(this);
  };

  change(type){
    const figures = this.state.figure
    figures.push(type)

    this.setState({figure: figures})
  };

  render() {
    return (
      <div className="app">
        <div>{this.state.figure}</div>
        <div className="fig-container">{this.state.figure.map((figureType, i) => <Figure type={figureType} key={i}/> )}</div>
        <div className="figures">
          <Figure type="circle"/>
          <Figure type="square"/>
          <Figure type="triangle"/>
        </div>
      </div>
    )
  }
}
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F
const Figure = props => (
  <div onClick={props.onClick} className={props.type}></div>
);


class App extends React.Component {
  state = {
    types: [ 'circle', 'square', 'triangle' ],
    figures: [],
  }

  add(type) {
    this.setState(({ figures }) => ({
      figures: [ ...figures, type ],
    }));
  }

  render() {
    return (
      <div>
        <div>
          {this.state.types.map(n => <Figure type={n} onClick={() => this.add(n)} />)}
        </div>
        <div>
          {this.state.figures.map(n => <Figure type={n} />)}
        </div>
      </div>
    );
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы