将旧的React语法重写为新的

Question

在react date-time文档中。它具有创建我自己的日期时间组件的代码段。由于不推荐使用createClass方法，因此我希望使用类组件将其重写为新语法。我正在努力与clear（）函数一起工作。下面是带有旧语法的文档代码。

var MyDTPicker = React.createClass({
    render: function(){
        return <Datetime renderInput={ this.renderInput } />;
    },
    renderInput: function( props, openCalendar, closeCalendar ){
        function clear(){
            props.onChange({target: {value: ''}});
        }
        return (
            <div>
                <input {...props} />
                <button onClick={openCalendar}>open calendar</button>
                <button onClick={closeCalendar}>close calendar</button>
                <button onClick={clear}>clear</button>
            </div>
        );
    },
});

我尝试使用新语法

import React, {Component} from 'react'
import Datetime from 'react-datetime';

class MyDateTimePicker extends React.Component {

    renderInput(props, openCalendar, closeCalendar) {
        return (
            <div>
                <input {...props} />
                <button onClick={openCalendar}>open calendar</button>
                <button onClick={closeCalendar}>close calendar</button>
                <button onClick={}>clear</button>
            </div>
        )
    }

    render() {
        return <Datetime renderInput={this.renderInput} />;
    }
}

export default MyDateTimePicker;

如您所见，我不确定清除功能怎么办

----更新----

尝试下面的答案时遇到错误

-----更新---

尝试更新后。我收到以下控制台错误

  

未捕获的TypeError：this.clear不是函数

我认为是因为应该这样

  

onClick = {this.clear}

当我这样做时，使用清除按钮可以很好地渲染。但是它什么也没做。我认为这是因为clear函数中的props现在已经超出了rendeInput的contex，后者什么都不做？