javascript - ReactJS，删除子项中parent.state中的一项

Question

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

但是当我尝试删除子组件中的项目时遇到问题:

• 我有一个父组件，我在其中初始化一个列表
• 我将此列表传递给我的子组件，该组件必须将其列出在“”标记之间
• 我想用按钮删除这个子项中的项目，但我无法访问parent.state，因此我无法删除它(与 Prop 的单向绑定(bind))

我该如何做才能使其正常工作？

这是我的代码:

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

你可以看看reflux和它的商店。其背后的想法是将您的数据存储在不同的位置，您可以从需要进行相关更改的任何 View 访问它。

在这种情况下，您的父组件将“监听”商店的更改(使用 eventEmitter)，并在商店发生更改时更新其状态。

希望这有帮助。