Ref with custom class - 反应日期选择器

Question

当在较早的组件（输入字段）上按下 enter 时，我试图将焦点设置在反应日期选择器上。我阅读了官方文档，使用简单字段的示例是可行的，但是当我使用 DatePicker 进行更改时，我得到了一个旧错误

TypeError: this.inputAccountDate.focus is not a function

我的函数是：

function CustomDatePicker(props) {
return (
    <div>
        {/* <input ref={props.innerRef} /> */}
            <DatePicker className="form-control" 
                placeholderText="Izaberite datum"
                dateFormat="dd/MM/yyyy"
                maxDate={new Date()}
                ref={props.innerRef}
        />
    </div>
);

}

来自 class 的代码段形式为：

     <Col className="pr-md-1" md="3">
        <FormGroup >
          <label>Datum računa</label>
           <div>
               <CustomDatePicker
                  innerRef={(input) => { this.inputAccountDate = input }}
                  />
           </div>
          </FormGroup>
      </Col>

我调用函数设置焦点的组件是

 <Col className="pr-md-1" md="3">
   <FormGroup>
      <label>Broj računa</label>
      <Input style={{'borderColor':'lightgray', 'fontSize':'14px'}}
         innerRef={(input) => { this.inputAccountNumber = input }}
         onKeyDown={this.focusAccountDate}
         placeholder="Br.računa"
         type="text"
         value={this.state.accountNumber || (header === null ? "" : 
             header.account_number) }
         onChange={this.changeAccountNumber}
         onFocus={(e)=>e.target.select()}
         required
        />
       </FormGroup>
    </Col>

管理焦点的功能是

    focusAccountDate = (e) => {
    if(e !== undefined) {
        if(e.key === 'Enter') {
            this.inputAccountDate.focus()
        }
    }
}

并且 inputAccountDate 是 this.inputAccountDate = React.createRef()

Answer 1

使用 setFocus() 而不是 focus。 DatePicker
中没有focus
在函数式组件中，使用 props 传递 ref 引用不是一个有效的方式。你需要知道Forwarding Ref

您的 CustomDatePicker 应更改如下。

function CustomDatePicker(props, ref) {
  return (
    <div>
            <DatePicker className="form-control" 
                placeholderText="Izaberite datum"
                dateFormat="dd/MM/yyyy"
                maxDate={new Date()}
                ref={ref}
        />
    </div>
  );
}

export default React.forwardRef(CustomDatePicker)

Ref with custom class - 反应日期选择器

Ref with custom class - reactdate picker

ref

reactjs

reactstrap