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

Question

[Naislymon]

Есть два компонента, один 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>
    )
  }
}

Answer 1

[0xD34F]

const Figure = ({ type, ...props }) => <div className={type} {...props}></div>;

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

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

  render() {
    const { types, figures } = this.state;

    return (
      <div>
        <div>
          {types.map(n => <Figure type={n} onClick={() => this.add(n)} />)}
        </div>
        <div>
          {figures.map(n => <Figure type={n} />)}
        </div>
      </div>
    );
  }
}

Comments

[Naislymon]

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

[0xD34F]

Ну и зачем тогда было показывать массив в стейте? Ответ обновил.

[Naislymon]

0xD34F, там изначально хранится пустой массив, который будет наполняться по клику. саму разметку которая создается должна быть вынесена в отдельный компонент. я не понимаю конкретно что мне в компоненте figure написать, чтоб онклик там работал. вернее как в этот онклик передать функцию change

[0xD34F]

там изначально хранится пустой массив, который будет наполняться по клику.

Это и было в первом варианте ответа. Вернул его обратно.

ВАМ ЧЕГО НАДО, А??!

[Naislymon]

0xD34F, как минимум не менять мой state и полностью код, а лишь как правильно сделать запись в Figure.js , где я в onClick пишу функцию change и что б работала

[0xD34F]

Надо в экземпляры Figure передавать функции, которые устанавливаются в качестве обработчиков клика:

- <Figure type="circle"/>
- <Figure type="square"/>
- <Figure type="triangle"/>
+ <Figure type="circle" change={() => this.change('circle')}/>
+ <Figure type="square" change={() => this.change('square')}/>
+ <Figure type="triangle" change={() => this.change('triangle')}/>

А с переписанным кодом всё-таки ознакомьтесь, изучите, что там и как.