在React中更新父道具

Question

伙計們，我有一個模態，我通過道具發送數組並將他的狀態設置為等於這個數組。然后我添加了元素並且它的狀態正在更新，但是它沒有更新道具...做以更新他的道具？

var FormattedDate = ReactIntl.FormattedDate;
var DiaryTable = React.createClass({
    getInitialState: function() {
        return {
            items : this.props.item,
            globalChecked: false,
            startDate:new Date(),
            endDate:new Date(),
            hours:0
        };
    },
    handleChecked : function (i) {
        // console.log( this.state.items[i].selected);
        this.state.items[i].selected =  !this.state.items[i].selected;
        this.setState(this.state.items);
        // console.log( this.state.items[i].selected);
    },
    checkAll:function () {
        this.state.globalChecked = !this.state.globalChecked;
        var ifChecked = this.state.globalChecked;
        var newItems = this.state.items.map(function(element) {
            return { start: element.start,end:element.end,hours:element.hours,selected: ifChecked };
        });
        this.setState({items:newItems});
    },
    remove : function () {
        for(var i = 0;i<this.state.items.length;i++)
        {
            if(this.state.items[i].selected)
            {
               this.state.items.splice(i,1);
                i--;
            }
        }
        this.setState(this.state.items);
    },
    render: function(){
        var arrayItems =  this.state.items.map(function (item,i) {
            return (
                <tr key={i}>
                    <td><input type="checkbox"  checked={item.selected} onClick={this.handleChecked.bind(this,i)}/></td>
                    <td><FormattedDate value={item.start}/></td>
                    <td><FormattedDate value={item.end}/></td>
                    <td>{item.hours}</td>
                    <td>
                        <button className="editButton"></button>
                    </td>
                </tr>
            );
        }.bind(this));

        return (
                <table className="myTable">
                    <thead>
                    <tr>
                    <th><input type="checkbox" onClick={this.checkAll}/></th>
                    <th>Start Date:</th>
                    <th>End Date:</th>
                    <th id="hoursField">Hours:</th>
                    <th id="editField">Edit:</th>
                    </tr>
                    </thead>
                    <tbody>
                    {arrayItems}
                    </tbody>
                    <tfoot>
                    <tr>
                    <td colSpan="4">
                        <span className="addButtonDisplay"><Modal items={this.state.items}></Modal></span>
                        <button className="myButton" onClick={this.remove}>Remove period</button>
                        <button className="myButton">Set result from merge</button>
                    </td>
                        </tr>
                    </tfoot>
                </table>
        );
    }
 });

var Modal = React.createClass({
    getInitialState() {
        return {
            items:this.props.items,
            show: false,
            startDate:null,
            endDate:null
        };
    },
    handleChangeStartDate:function (date) {
        this.setState({
            startDate:date
        });
    },
    handleChangeEndDate:function (date) {
        this.setState({
            endDate:date
        });
    },
    showModal() {
        this.setState({show: true});
    },

    hideModal() {
        this.setState({show: false});
    },
    addElement:function () {
        var workHours = this.workHours.value;
        var objectToAdd = {start:this.state.startDate,end:this.state.endDate,hours:workHours};
        this.state.items.push(objectToAdd);
        this.setState({items:this.state.items});
        this.state.startDate = null;
        this.state.endDate = null;
        this.setState({show: false});
    },
    render : function(){
        var close = () => this.setState({ show: false});
        return (
            <ReactBootstrap.ButtonToolbar>
                <button className="myButton" onClick={() => this.setState({ show: true})}>Add period</button>
                <ReactBootstrap.Modal show={this.state.show} onHide={this.hideModal} dialogClassName="custom-modal">
                    <ReactBootstrap.Modal.Header closeButton>
                        <ReactBootstrap.Modal.Title id="contained-modal-title-lg">Modal heading</ReactBootstrap.Modal.Title>
                    </ReactBootstrap.Modal.Header>
                    <ReactBootstrap.Modal.Body>
                       <form name="myForm">
                                <div>
                                    <span id="example">Enter Start Date: </span>
                                    <DatePicker selected={this.state.startDate} onChange={this.handleChangeStartDate} className="datepickerStartAlignment"/>
                                </div>

                                <div>
                                    <span>Enter End Date: </span>
                                    <DatePicker selected={this.state.endDate} onChange={this.handleChangeEndDate} className="datepickerEndAlignment"/>
                                </div>
                                <div>
                                    <span>Enter Work Hours: </span>
                                    <input ref={(ref) => this.workHours = ref} onChange={this.state.handleChangeWorkHours} id="hoursInput" name="workHours" type="number" min="0" required/>
                                </div>
                        </form>

                    </ReactBootstrap.Modal.Body>
                    <ReactBootstrap.Modal.Footer>
                        <ReactBootstrap.Button bsStyle="primary" onClick={this.addElement}>Add</ReactBootstrap.Button>
                        <ReactBootstrap.Button bsStyle="primary" onClick={this.hideModal}>Close</ReactBootstrap.Button>
                    </ReactBootstrap.Modal.Footer>
                </ReactBootstrap.Modal>
           </ReactBootstrap.ButtonToolbar>
        );
    }
});

Answer 1

我認為，您不應該在Modal組件狀態下存儲items變量。

僅將其存儲在props中，並添加onAddElement回調，該回調將從父組件提供，如下所示：

// Modal.js
var Modal = React.createClass({
  getInitialState() {
    return {
      show: false,
      startDate:null,
      endDate:null
    };
  },

  // Other methods...

  addElement: function () {
    var workHours = this.workHours.value;
    var objectToAdd = {start:this.state.startDate,end:this.state.endDate,hours:workHours};

    // Instead of adding object to state, we are providing it to callback.
    this.props.onAddElement(objectToAdd);

    // Also, you shouldn't change existing state values, provide them to `setState` function instead.
    this.setState({
      show: false,
      startDate: null,
      endDate: null
    });
  },

  render: function() {
    // Your render code.
  }
}

接下來，在父組件中，應定義handleAddElement函數並將其傳遞給Modal組件：

// DiaryTable.js
var DiaryTable = React.createClass({
  // Defining `handleAddElement` function, which will be invoked
  // everytime you add new element
  handleAddElement: function(element) {
    this.setState({
      // `concat` method returns new array with appended element.
      items: this.state.items.concat(element)
    });
  }

  render: function() {
    // I removed other markup, to made explanation more clear.
    return (
      <Modal items={this.state.items} onAddElement={this.handleAddElement.bind(this)}></Modal>
    );
  };
});

希望能幫助到你！