從子組件中反映父級的更新狀態

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 。

為此，您可以在Parent組件中創建一個新方法delete(id) ，在該組件中從狀態中刪除已刪除的項目。

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