ReactJS，在 child 中删除 parent.state 中的项目

Question

我实际上正在尝试使用我觉得非常有趣的 ReactJs，它为我提供了一种解决 View 问题的新方法。

但是我在尝试删除 child 组件中的项目时遇到了问题 :

我有一个 parent 组件，我在其中初始化了一个列表
我将此列表传递给我的 child 组件，该组件必须将其列在“”标签之间
我想用按钮删除此 child 中的一个项目，但我无法访问 parent.state，因此，我无法删除它（与 props 的单向绑定）

我该怎么做才能让它正常工作？

这是我的代码：

MyDirective = React.createClass({
    getInitialState: function () {
        toReturn = {}
        toReturn.text = 'Hi';
        toReturn.stringList = [
            {id: 1, value: 'value 1'},
            {id: 2, value: 'value 2'},
            {id: 3, value: 'value 3'}
        ];
        return toReturn;
    },
    handleChange: function (event) {
        this.setState({text: event.target.value});
    },
    handleKeypress: function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code === 13) {
            this.setState({stringList: this.state.stringList.concat([
                {id: this.state.stringList.length + 1, value: this.state.text}
            ])})
        }
    },
    render: function () {
        return (
            <div>
                <input type="text" value={this.state.text} onChange={this.handleChange} onKeyPress={this.handleKeypress} />
                <p>
                    {this.state.text}
                </p>
                <Listing stringList={this.state.stringList} />
            </div>
            );
    }
});


Listing = React.createClass({
    handleClick: function (item) {
        // I cant modify my state there :-/
    },
    render: function () {
        return(
            <ul>
                {
                    this.props.stringList.map(function (item) {
                        return(
                            <li key={item.id}>{item.value}                    ->
                                <button onClick={this.handleClick}>Delete</button>
                            </li>
                            );
                    }.bind(this))
                    }

            </ul>
            );
    }
});

React.render(
    <MyDirective text=""/>,
    document.getElementById('container')
);

Answer 1

你可以看看回流及其商店。这背后的想法是将您的数据存储在不同的地方，您可以从需要进行相关更改的任何视图访问它。

在这种情况下，您的父组件将 "listen" 更改商店（使用 eventEmitter）并在商店发生更改时更新其状态。

希望对您有所帮助。

ReactJS，在 child 中删除 parent.state 中的项目

ReactJS, deleting an item in parent.state in a child

javascript

reactjs