Как правильно поступать с обработчиками событий для сообщения между компонентами?

Question

[sergemin]

У меня такая структура

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            posts: [],
        }
    }
  render() {
    return (
      <div className="App">
                      {this.state.posts.map((item, index) => (
                          <Post
                              key={item.id}
                              dataID={item.id}
                              title={item.title}
                              content={item.body}

                          />
                      ))}
      </div>
    );
  }
}

Компонент post

class Post extends Component {
    modifyItem(e) {
        let target = e.target;
        let targetID = target.getAttribute('data-id');
        console.log(targetID, 'target id');
    }
    deleteItem(e) {
        let target = e.target;
        let targetID = target.getAttribute('data-id');
        fetch(`https://my-json-server.typicode.com/sergemin/render-list/posts/${targetID}`, {
            method: 'DELETE'
        })
            .then(() => {
                console.log(targetID);
            })
            .catch(error => console.log(error));
    }
    render() {
        return (
            <article className="post-list__item post-item">
                <div className="post-item__inner">
                    <div className="post-item__buttons buttons-block">
                        <button className="buttons-block__change"
                                onClick={this.modifyItem}
                                data-id={this.props.dataID}
                                >..</button>
                        <button className="buttons-block__delete"
                                onClick={this.deleteItem}
                                data-id={this.props.dataID}
                                >x</button>
                    </div>
                    <h3 className="post-item__title">{this.props.title}</h3>
                    <p className="post-item__body">{this.props.content}</p>
                </div>

            </article>
        )
    }
}
Post.defaultProps = {
    title: PropTypes.string.isRequired,
    content: PropTypes.string
};

post - это компонент, в нем есть два обработчика для двух кнопок на клик. Одна для удаления, а вторая для правки.
Но дело в том, что если у меня обработчик лежит внутри Post, а массив с этими постами лежит в state в App, то как я могу удалить один элемент из state другого компонента? Точнее, как я из дочернего компонента могу передать информацию об изменениях?

Я сначала думал, что функцию-обработчик нужно вынести в компонент App и при

{this.state.posts.map((item, index) => (
                          <Post
                              key={item.id}
                              dataID={item.id}
                              title={item.title}
                              content={item.body}

                          />
                      ))}

Повесить онклик и с ним работать, а в Post передать онклик через пропс, но дело в том, что внутри компонента Post две независимые кнопки, на которых должен быть онклик

Как быть?

Comments

[Роман Александрович]

Думаю в вашем приложении уже пришло время для редукса

[sergemin]

Роман Александрович, я думал, что к редуксу прибегают, когда приложейние действительно становится сложным. У меня пока только рендер списка с возможностью модификации и удаления элементов

Answer 1

[Ваге]

есть два варианта

<div className="post-item__buttons buttons-block">
  <button
    className="buttons-block__change"
    onClick={this.props.onClickmodify}
    data-id={this.props.dataID}
  >
    ..
  </button>
  <button
    className="buttons-block__delete"
    onClick={this.props.onClickdelete}
    data-id={this.props.dataID}
  >
    x
  </button>
</div>;

второй пример

...
modifyItem(e) {
        let target = e.target;
        let targetID = target.getAttribute('data-id');
        console.log(targetID, 'target id');
        this.props.modifyItemCallback(targetID);
    }
    deleteItem(e) {
        let target = e.target;
        let targetID = target.getAttribute('data-id');
        fetch(`https://my-json-server.typicode.com/sergemin/render-list/posts/${targetID}`, {
            method: 'DELETE'
        })
            .then(() => {
                console.log(targetID);
                this.props.deleteItemCallback(targetID)
            })
            .catch(error => console.log(error));
    }
...

<Post
  key={item.id}
  dataID={item.id}
  title={item.title}
  content={item.body}
  modifyItemCallback={(id) => console.log(id)}
  deleteItemCallback={(id) => console.log(id)}
/>;

Comments

[sergemin]

Спасибо. А вообще я правильный подход делаю? Не ищу ли я сейчас костыль? Может быть нужно поменять структуру компонентов? Или это хороший подход?

[Ваге]

sergemin, не не вы в основном все правильно делайте

[Ваге]

вы можете переписать код

{this.state.posts.map((item, index) => (
                          <Post
                              key={item.id}
                              dataID={item.id} // вы передаете id через пропс , все ок!
                              title={item.title}
                              content={item.body}

                          />
                      ))}

вы можете убрать data-id из button

...
<div className="post-item__buttons buttons-block">
                        <button className="buttons-block__change"
                                onClick={this.modifyItem}
                                data-id={this.props.dataID} // убираем атрибут
                                >..</button>
                        <button className="buttons-block__delete"
                                onClick={this.deleteItem}
                                data-id={this.props.dataID} // убираем атрибут
                                >x</button>
                    </div>
...

...
modifyItem(e) {
        // let target = e.target;
        // let targetID = target.getAttribute('data-id');
       // вместо этого просто напишите -> this.props.dataID
        console.log(this.props.dataID, 'target id');
    }
    deleteItem(e) {
        //let target = e.target;
        //let targetID = target.getAttribute('data-id');
       // тоже самое и здесь
        fetch(`https://my-json-server.typicode.com/sergemin/render-list/posts/${this.props.dataID}`, {
            method: 'DELETE'
        })
            .then(() => {
                console.log(this.props.dataID);
            })
            .catch(error => console.log(error));
    }
...

не забудьте про constructor

class Post extends React.Component {
  constructor() {
    super();
    this.deleteItem = this.deleteItem.bind(this);
    this.modifyItem = this.modifyItem.bind(this);
  }
  // ...
}

[sergemin]

Ваге, огромное спасибо!!