如何获取与 Ant Design 有时间的 Rangepicker 的值？答案

【问题标题】：How to get the value of the Rangepicker which having the time with Ant Design?如何获取与 Ant Design 有时间的 Rangepicker 的值？
【发布时间】：2019-04-19 13:59:22
【问题描述】：

我有一个日期和时间的 Rangepicker 表，这个表是动态的，我可以添加和删除这些范围选择器，如下图所示：

我想将这些值存储在另一个表中以将其发送到后端，当我在 Rangepicker 上有值时，我得到一个错误。

我的代码是：

import { DatePicker } from 'antd';
import moment from 'moment-timezone';
import fr_FR from 'antd/lib/locale-provider/fr_FR';
import "moment/locale/fr";
const { RangePicker } = DatePicker;
export default class App extends Component {
constructor(props) {
    super(props);
    this.state= {
        tranches :[{date:null}]
    }
  onChange(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString)
  }
  onOk(value) {
    console.log('onOk: ', value);
  }
  render() {
    return (
       <div>
         { 
                      this.state.tranches.map((el, i) => 
                        <Row key={i}>
                          <Col span={12}>
                            &nbsp; &nbsp; &nbsp;
                            <label className="pt-label .modifier"><strong>Période</strong></label>
                            <LocaleProvider locale={fr_FR}>
                              <RangePicker 
                                allowClear={false}
                                id="date" name= "date"
                                style={{ width: '547px', marginLeft:'20px'}} 
                                locale="fr" 
                                //placeholder={["Date de début","Date de fin"]} 
                                separator="-" 
                                onChange={this.onChange}
                                showTime={{ format: 'HH:mm' }}
                                format="DD/MM/YYYY HH:mm"
                                placeholder={['Date et heure de début', 'Date et heure de fin']}
                                onOk={this.onOk}
                              />
                            </LocaleProvider>
                          </Col>
                          <Col span={12}>
                            {i === 0 ? 
                                        <>                      
                                      <Icon type="plus-circle" theme="twoTone" twoToneColor="#52c41a"  onClick={this.ajouterTranche}/> 
                                          <br/> 
                                        </>
                                      :
                                        <>
                                       <Icon type="close-circle" theme="twoTone" twoToneColor="red"  onClick={this.supprimerTranche(i)}/>

                                          <Icon type="plus-circle" theme="twoTone" twoToneColor="#52c41a"  onClick={this.ajouterTranche}/>  
                                          <br/>
                                        </> 
                                      }
                          </Col>
</Row>
                    )}
}

我该如何解决？

【问题讨论】：

你能创建一个沙盒吗？在我看来没问题。您需要在 onOk() 中将其存储到您的状态，并确保在按下 x 图标时将其删除。
@ShivamGupta 这是我的代码沙箱：codesandbox.io/s/53nr9w4l9n
好的，所以状态声明使它始终保持今天的日期和从今天开始的一个月。
codesandbox.io/s/719qvv8v11?fontsize=14
在这里，您必须使用 onChange() 传递上下文，以便添加所需的日期。仅供参考，请务必检查删除功能，它在上面的代码中没有按预期工作。

标签： javascript reactjs datetimepicker antd daterangepicker

【解决方案1】：

改变

onChange(value, dateString) {
 console.log('Selected Time: ', value);
 console.log('Formatted Selected Time: ', dateString)
}

到

onChange = (value, dateString) => {
 let date = this.state.date
 date.push(value)
 this.setState({date: date})
}

链接here 上述链接中的 x 图标不起作用

【讨论】：

谢谢@Shivam，但是，当我单击关闭按钮将其删除时，它将从日期表中删除

【解决方案2】：

 onChangeDate(value) {
    this.setState({date: value});
 };


onChange{this.onChangeDate.bind(this)}

【讨论】：