日期选择器上的自定义输入字段

Posted 2023-05-07

【中文标题】日期选择器上的自定义输入字段

【英文标题】：Custom Input Field on datepicker

【发布时间】：2018-10-27 16:59:18

【问题描述】：

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

一切都很好，除了我想自定义日期选择器的输入字段并将其调整为我的其他自定义字段，如标题输入。

当我通过

更改日期选择器时

customInput=<Input />

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

这是我的代码：

<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; 
        

        // ...
     

所以我通过以下方式添加了时钟事件：

    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>
    );
  

【问题讨论】：

Input 组件长什么样？很可能输入组件没有正确实现onChange 事件。

export namespace Input export interface Props onChange: (event: any) => void;占位符？：字符串；值？：字符串 |数字; isSecure?：任何； id?：字符串；

你可以edit你的问题在那里添加代码而不是评论。

完成:) 你能看穿吗？

【参考方案1】：

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

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>
        );
    

编辑：

在不触及 Input 组件的实现的情况下，一种可能的解决方法是将其包装到一个容器中并改为处理对它的点击：

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

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

【讨论】：

好吧，我不想更改输入组件，它在整个应用程序中都会用到。我想到了一些事情，比如通过 css-reference 或类似的东西改变字段本身（我是菜鸟）。你能想出一个解决办法吗？

@sleepysimon 我用一个可能的解决方法更新了我的答案，而没有触及原始Input 的实现。当然，您也可以自己编写一个组件来呈现所需的标记并添加正确的类。我无法提供，因为我不知道您的自定义输入的要求。这也超出了该问题的范围。要点是：您的输入组件需要一个onClick 回调。否则将无法正常工作。

刚刚想到了另一种解决方案：通过 className 实现并编写一个新的 css-class 也可以，不是吗？

@sleepysimon 从您显示的界面中，您的Input 组件不接受className 属性。那么你想如何注入 css 类名呢？您也可以编写自己的输入组件。这真的没什么大不了的。或者您只需将 onClick 回调添加到您现有的 Input 中，这根本不会破坏任何现有功能。

@sleepysimon 不，您只是将其添加到界面中。该接口仅描述您的组件接受哪些 props 传递的值需要具有的任何类型。但是您没有在实际组件上实现任何东西。这将完全没有效果。组件需要获取该道具并将其应用于它呈现的底层<input>。组件的实际代码是什么？可以发一下吗？