ReactJS изменить родительское состояние из дочернего компонента - программирование

ReactJS изменить родительское состояние из дочернего компонента

Я пытаюсь удалить элемент из массива состояний при нажатии. На данный момент у меня есть слушатель onclick, который вызывает функцию, переданную в реквизиты. Однако я получаю предупреждение: bind(): методы React-компонентов могут привязываться только к экземпляру компонента. См. Приложение... и он не удаляет элемент.

Спасибо за помощь в решении этой проблемы! Это в значительной степени остановило мой прогресс на остановке.

(function (React) {

var data = [
    'Go to work',
    'Play Albion Online',
    'Keep learning React'
]

var App = React.createClass({
    getInitialState: function () {
        return {data: []}
    },
    componentWillMount: function () {
        this.state.data = data;
    },
    removeItem: function (i) {
        console.log(i);
    },
    render: function () {
        return (
        <ToDoList onRemoveItem={this.removeItem} tasks={this.state.data} />
        )
    }
});

var ToDoList = React.createClass({
    render: function () {

        var scope = this;

        var tasks = this.props.tasks.map(function (task, i) {
            return <ToDo onClick={scope.props.onRemoveItem.bind(this, i)} key={task} task={task} />
        });

        return (
        <ul>
            {tasks}
        </ul>
        )
    }
});

var ToDo = React.createClass({
    render: function () {
        return (
            <li>{this.props.task}</li>
        )
    }
});

React.render(<App />, document.getElementById('example'));
})(React);
4b9b3361

Ответ 1

Реагирует фактически автоматическое связывание методов с текущим компонентом:

http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html

В компоненте TodoList, а не:

scope.props.onRemoveItem.bind(this, i)

Try:

scope.props.onRemoveItem.bind(null, i)

Предоставляя null вместо this, вы разрешите Реактору делать свою работу. Также вам нужно использовать обработчик onClick:

<li onClick={this.props.onClick}>{this.props.task}</li>