Question

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

但在尝试删除子组件中的项目时遇到问题：

我有一个父组件，我在其中初始化列表
我将此列表传递给我的子组件，该组件必须在''tag
我想用一个按钮删除这个孩子的一个项目，但是我无法访问parent.state，所以，我不能删除它（与道具的单向绑定）

如何使其正常工作？

这是我的代码：

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

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

在这种情况下，您的父组件将“监听”商店的更改（使用eventEmitter），并在商店中所做的更改时更新其状态。

希望这会有所帮助。

ReactJS，删除子项中parent.state中的项目

1 个答案: