ReactJs复选框值和日期未在状态中更新
ReactJs Checkbox value and date not getting updated in state
我是ReactJS的新手,尝试从输入类型日期中获取选中/选中复选框的值以及日期选择。但无法实现。
当我点击Generate Report
按钮时,您可以看到控制台显示状态。只有位置被保存,而不是其他选项。
以下是我更新状态值和初始状态值的函数:
getInitialState: function() {
return {
selectedLocation: locationList[0].value,
selectedServiceType: [],
selectedStDate:new Date(1446887898),
selectedEdDate:new Date(1446887898)
};
},
selectServiceType:function(e){
selectedTypes.indexOf(e.target.value)? selectedTypes.push(e.target.value):console.log('Already exists in array');
this.setState({
selectedServiceType: e.target.checked
})
},
changeHandler: function(e) {
this.setState({
selectedLocation: e.target.value
})
},
selectStDate: function(e) {
this.setState({
selectedDate: e.target.value
})
},
selectEdDate: function(e) {
this.setState({
selectedEdDate: e.target.value
})
},
完整的演示在这里JSFiddle
非常感谢
我已经完成了重构,您可以检查它,Example
var FulfilmentReport = React.createClass({
getInitialState: function() {
return {
services: this.props.services,
location: this.props.locations[1].value,
startDate: this.formatDate(new Date(1446887898)),
endDate: this.formatDate(new Date(1446887898))
};
},
changeService: function (e) {
var services = this.state.services.map(function (service) {
service.checked = (service.value === e.target.value) ? !service.checked : service.checked;
return service;
});
this.setState({
services: services
});
},
handleChange: function(field, e) {
var data = {};
data[field] = e.target.value;
this.setState(data);
},
render: function() {
var buttonClasess = [
'right', 'mdl-button', 'mdl-js-button', 'mdl-button--raised',
'mdl-js-ripple-effect', 'mdl-button--colored'
].join(' ');
var services = this.state.services.map(function (service) {
return [
<label>{ service.name }</label>,
<input
type="checkbox"
name={service.value}
value={service.value}
checked={service.checked}
onChange={ this.changeService } />
];
}, this)
var locations = this.props.locations.map(function (location, index) {
return (<option key={index} value={ location.value }>{ location.name }</option>);
});
var elements = [{
label: <label>Location</label>,
data: <select
onChange={ this.handleChange.bind(this, 'location') }
value={ this.state.location }>{ locations }</select>
}, {
label: <label>Service Type</label>,
data: <div>{ services }</div>
},{
label: <label>Start Date</label>,
data: <input
type="date"
value={ this.state.startDate }
onChange={ this.handleChange.bind(this, 'startDate') } />
},{
label: <label>'End Date'</label>,
data: <input
type="date"
value={ this.state.endDate }
onChange={ this.handleChange.bind(this, 'endDate') } />
}];
elements = elements.map(function (element) {
return [element.label, element.data];
});
return (<div id="items">
<div>{ elements }</div>
<input type="button" value="Generate Report" onClick={ this.onItemClick } className={ buttonClasess } />
</div>);
},
onItemClick: function() {
this.state.services = this.state.services.filter(function (el) {
return el.checked;
}) ;
console.log( this.state );
},
formatDate: function (date) {
return date.toISOString().slice(0, 10);
}
});
相关文章:
- Web应用程序,将成员状态更新为其他成员
- Universal React/redux未在状态更新时呈现
- React.js组件中的状态更新在我的页面下留下了空白
- Ajax/Javascript用户状态更新
- 使用ReactJS使用Redux的简单状态更新事件
- Yii:TbCollapse 多链接(href = #collapse 并将状态更新为 be=“1”)
- 当 redux 状态更新时,在组件上调用 forceUpdate()
- 如何更改输入字段值,使其不会在每次更改时贯穿整个 Redux 状态更新周期
- 使用 Google 表格中列出的地址发送单件状态更新电子邮件
- 评论仅发布到最新的状态更新
- 强制 Twitter Epi 库发布状态更新,即使它是上一条推文的副本
- 使用Facebook javascript sdk获取最新的5个状态更新
- 正确处理多个连续状态更新
- 将状态更新到输入字段
- 如何在JavaScript中创建Twitter状态更新,并从中接收响应
- 如何从web url加载元数据,类似于facebook在状态更新时发布url的做法.
- Onkeyup或onkeypress javascript事件问题-密码状态更新
- WshShell运行不等待,但执行状态更新(运行vs执行问题)
- Web服务——异步执行和状态更新
- 点击后显示FB状态更新弹出窗口