0

我正在尝试使用DayPickerInput我自己的自定义输入，但是在输入输入时，一旦选择了一天就会失去焦点。如果尝试输入例如：2020-08-20，则可以看到这一点，当输入到达“2020-08-2”时，它会选择第二个作为日期并取消输入焦点，不允许用户到达 20。

这是一个代码沙箱，我在其中复制了问题。

DayPickerInput的用法：

<DayPickerInput
        component={(props) => <CustomInput {...props} />}
        value={value}
        onDayChange={setValue} />

还有我的自定义输入组件：

import React from "react";

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focus() {
    this.inputRef.current.focus();
  }

  render() {
    return <input {...this.props} ref={this.inputRef} />;
  }
}

export default Input;

我已经看到了这个问题，并尝试了那里解释的内容，但它不起作用，我不确定还有什么可以尝试的。

任何指导表示赞赏！谢谢！

4

1 回答 1

1

我一发布问题就找到了解决方案，我觉得有点傻。尽管如此，如果其他人也有同样的问题。

我必须添加一个转发的 ref 以便在我的onDayChange函数中调用ref.current.focus()，现在保持焦点。这是最终代码：（我相信沙箱已更新为正确的解决方案，因为我在其中玩耍）

function Example() {
  const [value, setValue] = React.useState(null);
  const ref = React.useRef(null);
  return (
    <div>
      <h3>DayPickerInput</h3>
      <DayPickerInput
        component={React.forwardRef((props, ref) => <CustomInput {...props} innerRef={ref}/>)}
        value={value}
        inputProps={{ ref: ref }}
        onDayChange={async day => {
           await setValue(day);
           // need to call focus here to keep focus on the input
           ref.current.focus();
        }}
      />
    </div>
  );
}

并且在自定义输入中，该组件中不再定义ref，而是通过props转发：

import React from "react";

class Input extends React.Component {
  focus() {
    this.props.innerRef.current.focus();
  }

  render() {
    return <input {...this.props} ref={this.props.innerRef} />;
  }
}

export default Input;
于 2020-08-12T20:46:55.280 回答