以下子组件从其父组件接收props。然后它使用getInitialState.props将 props 设置为它自己的状态，并使用this.state.
componentWillRecieveProps当子组件收到新props时，我使用它来更新子组件的状态。
最初，当组件被调用时，它可以正常工作。第二次传props的时候会出现这个问题，触发传props的对应按钮需要点击两次才能设置child的状态。
我可能使用componentWillRecieveProps不当？
getInitialState: function() {
return {
pitch: this.props.booking.pitch,
email: this.props.booking.email,
firstName: this.props.booking.firstName,
arrivalDate: this.props.booking.arrivalDate,
}
},
componentWillReceiveProps: function (props) {
this.setState({
pitch: this.props.booking.pitch,
email: this.props.booking.email,
firstName: this.props.booking.firstName,
arrivalDate: this.props.booking.arrivalDate,
})
},
完整代码：
var React = require('react');
var createReactClass = require('create-react-class');
var ViewBooking = createReactClass({
getInitialState: function() {
return {
pitch: this.props.booking.pitch,
email: this.props.booking.email,
firstName: this.props.booking.firstName,
arrivalDate: this.props.booking.arrivalDate,
}
},
componentWillReceiveProps: function (props) {
this.setState({
pitch: this.props.booking.pitch,
email: this.props.booking.email,
firstName: this.props.booking.firstName,
arrivalDate: this.props.booking.arrivalDate,
})
},
_handleInputChange: function(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
var partialState = {};
partialState[name] = value;
console.log(partialState);
this.setState(partialState);
},
_handleUpdateClose: function(e) {
this.props.updateClose();
e.preventDefault();
},
_handleUpdateBooking: function (e) {
var tempBooking = {
pitch: this.state.pitch,
email: this.state.email,
firstName: this.state.firstName,
arrivalDate: this.state.arrivalDate,
}
this.props.updateBooking(tempBooking);
e.preventDefault();
},
_handleDelete: function (e) {
this.props.deleteBooking();
e.preventDefault();
},
render: function() {
if (this.props.viewFormVisibility) {
formVisibility = {"display": "block"};
} else {
formVisibility = {"display": "none"};
}
return (
<div>
<form style={formVisibility}>
<h4>View Booking</h4>
<div className="form-group row">
<label className="col-2 col-form-label">Pitch</label>
<div className="col-10">
<input value={this.state.pitch} onChange={this._handleInputChange} className="form-control" name="pitch" ref="inputPitch" type="number" id="example-number-input"/>
</div>
</div>
<div className="form-group row">
<label className="col-2 col-form-label">First Name</label>
<div className="col-10">
<input value={this.state.firstName} onChange={this._handleInputChange} className="form-control" ref="firstName" name="firstName" type="text" id="example-text-input"/>
</div>
</div>
<div className="form-group row">
<label className="col-2 col-form-label">Email</label>
<div className="col-10">
<input value={this.state.email} onChange={this._handleInputChange} className="form-control" ref="inputEmail" type="email" name="email" id="example-email-input"/>
</div>
</div>
<div className="form-group row">
<label className="col-2 col-form-label">Date</label>
<div className="col-10">
<input value={this.state.arrivalDate} onChange={this._handleInputChange} className="form-control" ref="arrivalDate" name="arrivalDate" type="date" id="example-date-input"/>
</div>
</div>
<button type="submit" className="btn btn-primary" onClick={this._handleUpdateBooking}>Save changes</button>
<button className="btn btn-danger" onClick={this._handleUpdateClose}>Close</button>
<button onClick={this._handleDelete} className="btn btn-danger">Delete</button>
</form>
</div>
)
}
})
module.exports = ViewBooking;