datepicker上的自定义输入字段 [英] Custom Input Field on datepicker

问题描述

我在我的应用程序中实现了react-datepicker。

i implemented the react-datepicker in my app.

除了我想自定义datepicker的输入字段并将其调整到我的其他自定义字段之外标题输入。

everythings fine except i want to customize the input field of the datepicker and adapt it to my other custom fields like title input.

当我通过

customInput={<Input />}

字段，它的外观已经改变但我无法选择日期已经过去了（选择器不再工作了）。

field, the looks of it have changed but i cant select dates anymore (the picker isnt working anymore).

继承人我的代码：

<DatePicker
    customInput={<Input />}
    dateFormat="DD.MM.YYYY"
    selected=...
    onChange=...

/>

任何想法？

    export namespace Input { 
        export interface Props { 
            onChange: (event: any) => void; 
            placeholder?: string; 
            value?: string | number; 
            isSecure?: any; 
            id?: string; 
        }

        // ...
    } 

所以我按以下方式添加了clock事件：

So I added the clock event in the following way:

    export namespace Input {
        export interface Props {
            onChange: (event: any) => void;
            placeholder?: string;
            value?: string | number;
            isSecure?: any;
            id?: string;
            onClick: (event: any) => void;
        }
    }

是吗？

组件代码：

export class Input extends React.Component<Input.Props, Input.State> {
  public render() {
    const controlClass = classNames(
      [style.control]
    );
    const inputClass = classNames(
      [style.input]
    );
    return (
      <p className={controlClass} >
        <input
          id={this.props.id}
          onChange={this.props.onChange}
          className={inputClass}
          type={this.props.isSecure ? "password" : "text"}
          placeholder={this.props.placeholder}
          value={this.props.value}
        />
      </p>
    );
  }
}

推荐答案

您的输入组件需要实现 onClick 事件，并将其作为道具提供，因为这是触发日期选择器的原因打开。

Your Input component needs to implement an onClick event and make that available as a prop because that is what triggers the date picker to open itself.

const Input = ({onChange, placeholder, value, isSecure, id, onClick}) => (
    <input
        onChange={onChange}
        placeholder={placeholder}
        value={value}
        isSecure={isSecure}
        id={id}
        onClick={onClick}
    />
);

const NoClickInput = ({onClick, ...props}) => <Input {...props} />;

class App extends Component {
    state = {
        value: moment(),
    };

    render() {
        return (
            <div>
                <DatePicker
                    value={this.state.value}
                    dateFormat="DD.MM.YYYY"
                    customInput={<Input />}
                    selected={this.state.date}
                    onChange={date => this.setState({date})}
                />
                <DatePicker
                    value={this.state.value}
                    dateFormat="DD.MM.YYYY"
                    customInput={<NoClickInput />} {/* Will not work */}
                    selected={this.state.date}
                    onChange={date => this.setState({date})}
                />
            </div>
        );
    }
}

编辑：

可以在不触及<$ c $实现的情况下解决c>输入组件将它包装到一个容器中并代之以点击它：

A possible work around without touching the implementation of your Input component would be to wrap it into a container and handle a click on that instead:

const ClickableInput = ({onClick, ...props}) => (
    <div onClick={onClick}>
        <Input {...props}>
    </div>
);

然后使用 ClickableInput 而不是输入作为您的自定义输入。

Then use ClickableInput instead of Input as your custom input.

这篇关于datepicker上的自定义输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！