Question

我能够在React文档中复制该示例以创建一个引用，然后将其定位在Code Sandbox上，但是由于某些原因，我无法在本地项目中复制它。我正在使用最新版本的react 16.6.3。

TypeError: Cannot read property 'focus' of null
SelectDonation.save_donation_amount
src/components/SelectDonation.js:19
  16 | save_donation_amount () {
  17 |   
  18 |   // testing refs
> 19 |   this.customDonationInput.current.focus();
     | ^  20 |   
  21 |   // prevent pageload
  22 |   // grab the custom amount

这是我的组成部分：

import React from "react";
import {Button, Modal, Form, Input, Radio} from 'semantic-ui-react';
import store from "../reducer";

export default class SelectDonation extends React.Component {
  constructor(props) {
    super(props);
    this.customDonationInput = React.createRef();
    this.save_donation_amount = this.save_donation_amount.bind(this);
  }

  save_donation_amount () {
    this.customDonationInput.current.focus();
  };

  render() {
    return (
        <Form>
            <Form.Input
              type='number'
              placeholder='Custom Amount'
              name='donation_amount'
              id='custom_amount'
              ref={this.customDonationInput}
              // value={store.donation_amount}
              defaultValue={store.donation_amount}
            />

            <Button
              primary
              onClick={
                this.save_donation_amount
              }>Next Step
            </Button>
        </Form>
    )
  }
}

从错误看来，.current属性不存在。可能是什么原因造成的？

Answer 1

由于语义UI React的<Form.Input>是功能组件，因此无法接收引用而引起错误。将元素更改为常规<input>可解决问题

反应引用绑定导致：TypeError：无法读取null的属性“ focus”

1 个答案: