我能够显示checkboxlist并能够选择值并保存到数据库。
现在我要编辑该记录。为此我必须显示清单。数据来自动作创建者到道具。我正在使用redux形式的initalValues渲染它。现在当我改变选择时。它没有发生。因为onChange函数调用和重新渲染发生。
我的问题是我理解的是我的数据应该处于状态而不是道具，以便我改变选择。它可以通过改变和重新反映来体现。 下面的示例工作正常，因为我硬编码了复选框列表。但问题是它是来自数据库的当前事件。现在用户想要使用预先选中的复选框进行编辑和更改。
Can anyone help me in this regards. Here is the Code:
class EventsShow extends Component {
static contextTypes = {
router: PropTypes.object
};
constructor(props) {
super(props);
const data = [
{ id: 3, DepartmentName: a', selected: true },
{ id: 4, DepartmentName: 'b', selected: true },
{ id: 5, DepartmentName: 'c', selected: true }
];
this.onInputChange = this.onInputChange.bind(this);
this.state = { optionsData: data };
}
componentWillMount() {
this.props.fetchEvent(this.props.params.id);
}
onSubmit(props) {
this.props.createEvent(props)
.then(() => {
this.context.router.push('/');
});
}
renderField = ({ input, label, type, meta: { touched, error } }) => (
<div className="row">
<div className="col-md-2"></div>
<div className="col-md-2">
<label>{label}</label>
</div>
<div className="col-md-5">
<input {...input} placeholder={label} type={type} className="form-control" />
</div>
<div className="col-md-3 text-help">
{touched && error && <span>{error}</span>}
</div>
</div>
)
onInputChange(id, e) {
console.log(e);
const a = this.state.optionsData.map((i) => {
return {
id: i.id,
selected: (i.id === id ? !i.selected : i.selected),
DepartmentName: i.DepartmentName
};
});
this.setState({ optionsData: a });
}
renderCheckboxList(event) {
return this.state.optionsData.map((item, index) => {
return (
<div key={'chk-' + index} className="checkbox">
<label>
<input
type="checkbox"
name={item.id}
value={item.id}
onChange={this.onInputChange.bind(this, item.id)}
checked={item.selected}
/>
{item.DepartmentName}
</label>
</div>
);
});
}
render() {
const { event, handleSubmit } = this.props;
if (!event) {
return <div>Loading...</div>;
}
return (
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<div className="list-group-item">
<div className="panel panel-success">
<div className="panel-heading">
<strong>View/Edit A Existing Event</strong>
</div>
</div>
<Field name="Title" type="text" component={this.renderField} label="Title" />
<Field name="SubmittingDepartment" type="text" component={this.renderField} label="Submitting Department" />
<Field name="Location" type="text" component={this.renderField} label="Location" />
<Field name="StartDateTime" type="datetime-local" component={this.renderField} label="Start Date and Time" />
<Field name="EndDateTime" type="datetime-local" component={this.renderField} label="End Date and Time" />
<Field name="Description" type="textarea" component={this.renderField} label="Description" />
<div className="row">
<div className="col-md-2"></div>
<div className="col-md-2">
<label>Participating Departments</label>
</div>
<div className="col-md-5">
{this.renderCheckboxList(event)}
</div>
<div className="col-md-3 text-help">
</div>
</div>
<div className="row"> </div>
<div className="row">
<div className="col-md-4 text-right"></div>
<div className="col-md-5">
<button type="submit" className="btn btn-primary">Update</button>
<button type="submit" className="btn btn-primary">Cancel</button>
<Link to="/" className="btn btn-danger">Back to List</Link>
</div>
</div>
</div>
</form>
);
}
}
const EventsShowForm = reduxForm({
form: 'EventsShowForm',
enableReinitialize: true,
validate
})(EventsShow);
function mapStateToProps(state) {
return {
event: state.events.event,
initialValues: state.events.event
};
}
export default connect(mapStateToProps, { fetchEvent, updateEvent })(EventsShowForm);
Here is the another version of renderCheckbox with Props which shows already selected values but does not work on change the selection.
renderCheckboxList(event) {
event.RecommendedParticipants.map((item) => {
opts.push({
id: item.RecomendedParticipantId,
selected: item.CheckValue,
DepartmentName: item.DepartmentName
}
);
});*/
console.log(this.state);
return this.props.initialValues.RecommendedParticipants.map((item, index) => {
return (
<div key={'chk-' + index} className="checkbox">
<label>
<input
type="checkbox"
name={item.RecomendedParticipantId}
value={item.RecomendedParticipantId}
onChange={this.onInputChange.bind(this, item.RecomendedParticipantId)}
checked={item.CheckValue}
/>
{item.DepartmentName}
</label>
</div>
);
});
}