Блог

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

Мои элементы:

 const items = [
    {
        id: 1,
        data: "some data"
    }, {
        id: 2,
        data: "some data"
    }, {
        id: 3,
        data: "some data"
    }
]
 

Динамическое создание каждого элемента как компонента:

 items.map(item => {
                return { key: item.id, content: <Item key={item.id} ItemObject={item}/> }
            });
 

Пока все хорошо. Внутри этого класса компонентов элемента у меня есть три действия, которые касаются этого вопроса: первое вызывается при щелчке элемента div, другое componentDidUpdate — метод жизненного цикла элемента, а третье — updateStatus обновление состояния компонента. Вот класс:

Item.js

 export function _updateStatus(newFlags) {
    this.setState({ flags: newFlags });
}

export default class SystemUnit extends React.Component {
    constructor(props) {
        super(props);
        this.state = { flags: [] };
        _updateStatus = _updateStatus.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        ReactDOM.render(<Actions Item={this.props.ItemObject} />, document.getElementsByClassName("actions-wrapper")[0]);
    }
}
 

В компоненте Actions есть кнопка, которая при нажатии должна запускать обратный запуск updateStatus внутри элемента, который вызывал действия.

Actions.js

 import { _updateStatus } from './Item';

export default class Actions extends React.Component {
    constructor(props) {
        super(props);
    this.state = {flags: []}
    }
    render() {
        <button onClick={() => { _updateStatus(this.state.flags) }}>Finish</button>
    }
}
 

Однако кнопка запускает метод для последнего элемента списка, а не для компонента, который его отобразил. В этом примере у меня есть три элемента, и независимо от того, какой из них нажат, кнопка компонента действия всегда будет вызывать изменение по пункту 3.

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

Вы импортируете функцию из самого компонента через строку:

 import { _updateStatus } from './Item';
 

Вот почему вы получаете функцию последнего визуализированного Item

Вместо этого попробуйте передать функцию в качестве параметра:

  ReactDOM.render(<Actions Item={this.props.ItemObject} updateStatus={this._updateStatus} />, document.getElementsByClassName("actions-wrapper")[0]);
 

И доступ к таким действиям, как:

 render() {
    <button onClick={() => { this.props.updateStatus(this.state.flags) }}>Finish</button>
}