Question

我有子组件接收来自父级的道具，但是在孩子的事件（按钮点击）中，我想再次使用新道具setState。因此，父级将列表中的所有项目传递给子级。在子prop中，按钮删除列表中的项。但是如何更新状态以便列表项也从视图中删除。这是我的代码：

const Parent = React.createClass({
    getInitialState:function(){
        return {
            items: []
        };
    },
    componentWillMount:function(){
        axios.get('/comments')
            .then(function(response) {
                this.setState({
                    items: response.data
                })
            }.bind(this));
    },
    render() {
        return (
            <div>
                <Child1 data={this.state.items}/>
            </div>
        );
    }
});

export default Parent;

export default function Child1(props){
    return(
        <div>
            { props.data.map((comment,id) =>(
                    <p key={id}>
                        {comment.name}<Delete data={comment.id}/>
                    </p>
                )
            )}
        </div>
    )
}

class Delete extends React.Component {
    constructor() {
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        Purchase.Action(this.props.data,'remove');
        axios.post('/comments', {
            item: this.props.data
        })
        .then(function (response) {
            console.log(response.data);     
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    render() {
        return <Button onClick={this.handleClick}>Delete</Button>;
    }
}

module.exports = Delete;

因此，虽然在服务器上删除了注释，但我希望通过更新状态从组件视图中删除注释。

Answer 1

如果您要删除组件中的评论，则必须更新您的父级state。

为此，您可以在delete(id)组件中创建一个新方法，Parent，从州中删除已删除的项目。

const Parent = React.createClass({
    getInitialState:function(){
        return {
            items: []
        };
    },
    componentWillMount:function(){
        this.setState({
            items: [
            {id: 1,name: "Name 1"},
            {id: 2,name: "Name 2"},
            {id: 3,name: "Name 3"}
          ]
        })
    },
    delete(id){
      // axios.post(...)
      let items = this.state.items.filter(item => item.id !== id);
      this.setState({items});
    },
    render() {
        return (
            <div>
                <Child1 
                   data={this.state.items} 
                   handleClick={this.delete} // Pass the method here
                />
            </div>
        );
    }
});

function Child1(props){
    return(
        <div>
            { props.data.map((comment,id) =>(
                    <p key={id}>
                        {comment.name}
                        <Delete 
                           data={comment.id}
                           handleClick={() => props.handleClick(comment.id)} // Pass the id here
                        />
                    </p>
                )
            )}
        </div>
    )
}

class Delete extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <button onClick={this.props.handleClick}>Delete</button>;
    }
}

jsfiddle

从子组件中反映父级的更新状态

1 个答案: