Làm cách nào để tôi có thể đính kèm vào ref của một thành phần không trạng thái trong React?

Tôi đang tìm cách tạo một thành phần không trạng thái input phần tử của thành phần mẹ có thể được xác thực bởi thành phần mẹ.

Trong ví dụ của tôi bên dưới, tôi đang gặp sự cố trong đó đầu vào refkhông bao giờ được gán cho quyền riêng tư của cha mẹ_emailAddress tài sản .

Khi nào handleSubmitđược gọi this._emailAddresslà undefined. Có điều gì đó tôi đang thiếu, hoặc có cách nào tốt hơn để làm điều này?

interface FormTestState {
    errors: string;
}

class FormTest extends React.Component<void, FormTestState> {
    componentWillMount() {
        this.setState({ errors: '' });
    }

    render(): JSX.Element {
        return (
            <main role='main' className='about_us'>             
                <form onSubmit={this._handleSubmit.bind(this)}>
                    <TextInput 
                        label='email'
                        inputName='txtInput'
                        ariaLabel='email'
                        validation={this.state.errors}
                        ref={r => this._emailAddress = r}
                    />

                    <button type='submit'>submit</button>
                </form>
            </main>
        );
    }

    private _emailAddress: HTMLInputElement;

    private _handleSubmit(event: Event): void {
        event.preventDefault();
        // this._emailAddress is undefined
        if (!Validators.isEmail(this._emailAddress.value)) {
            this.setState({ errors: 'Please enter an email address.' });
        } else {
            this.setState({ errors: 'All Good.' });
        }
    }
}

const TextInput = ({ label, inputName, ariaLabel, validation, ref }: { label: string; inputName: string; ariaLabel: string; validation?: string; ref: (ref: HTMLInputElement) => void }) => (
    <div>
        <label htmlFor='txt_register_first_name'>
            { label }
        </label>

        <input type='text' id={inputName} name={inputName} className='input ' aria-label={ariaLabel} ref={ref} />

        <div className='input_validation'>
            <span>{validation}</span>
        </div>
    </div>
);

CHỈNH SỬA: Bây giờ bạn có thể với React Hooks. Hãy xem câu trả lời của Ante Gulin.

Bạn không thể truy cập Phản ứng như phương pháp (như componentDidMount, componentWillReceiveProps, vv) vào các thành phần không quốc tịch, trong đó có refs. Kiểm tra cuộc thảo luận này trên GH để biết toàn bộ cuộc trò chuyện.

Ý tưởng của không trạng thái là không có một cá thể nào được tạo cho nó (trạng thái). Như vậy, bạn không thể đính kèm a ref, vì không có trạng thái nào để đính kèm tham chiếu.

Đặt cược tốt nhất của bạn là chuyển trong một cuộc gọi lại khi thành phần thay đổi và sau đó gán văn bản đó cho trạng thái gốc.

Hoặc, bạn có thể bỏ qua hoàn toàn thành phần không trạng thái và sử dụng thành phần lớp bình thường.

Từ tài liệu ...

Bạn không thể sử dụng thuộc tính ref trên các thành phần chức năng vì chúng không có phiên bản. Tuy nhiên, bạn có thể sử dụng thuộc tính ref bên trong chức năng kết xuất của một thành phần chức năng.

function CustomTextInput(props) {
  // textInput must be declared here so the ref callback can refer to it
  let textInput = null;

  function handleClick() {
    textInput.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={(input) => { textInput = input; }} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );  
}

Bạn có thể sử dụng useRefhook có sẵn vìv16.7.0-alpha .

CHỈNH SỬA: Bạn được khuyến khích sử dụng Hooks trong sản xuất kể từ16.8.0 phát hành!

Hooks cho phép bạn duy trì trạng thái và xử lý các tác dụng phụ trong các thành phần chức năng.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Đọc thêm trong tài liệu API Hooks

Điều này là muộn nhưng tôi thấy giải pháp này tốt hơn nhiều. Chú ý đến cách nó sử dụng useRef & cách các thuộc tính có sẵn trong thuộc tính hiện tại .

function CustomTextInput(props) {
  // textInput must be declared here so the ref can refer to it
  const textInput = useRef(null);

  function handleClick() {
    textInput.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={textInput} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}

Để tham khảo thêm, hãy kiểm tra tài liệu phản ứng

Giá trị TextInput của bạn không hơn gì một trạng thái của thành phần của bạn. Vì vậy, thay vì tìm nạp giá trị hiện tại bằng một tham chiếu (ý kiến ​​tồi nói chung, theo như tôi biết), bạn có thể tìm nạp trạng thái hiện tại.

Trong một phiên bản rút gọn (không cần nhập):

class Form extends React.Component {
  constructor() {
    this.state = { _emailAddress: '' };

    this.updateEmailAddress = this.updateEmailAddress.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  updateEmailAddress(e) {
    this.setState({ _emailAddress: e.target.value });
  }

  handleSubmit() {
    console.log(this.state._emailAddress);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          value={this.state._emailAddress}
          onChange={this.updateEmailAddress}
        />
      </form>
    );
  }
}

Bạn cũng có thể nhận được giới thiệu về các thành phần chức năng với một hệ thống ống nước nhỏ

import React, { useEffect, useRef } from 'react';

// Main functional, complex component
const Canvas = (props) => {
  const canvasRef = useRef(null);

    // Canvas State
  const [canvasState, setCanvasState] = useState({
      stage: null,
      layer: null,
      context: null,
      canvas: null,
      image: null
  });

  useEffect(() => {
    canvasRef.current = canvasState;
    props.getRef(canvasRef);
  }, [canvasState]);


  // Initialize canvas
  useEffect(() => {
    setupCanvas();
  }, []);

  // ... I'm using this for a Konva canvas with external controls ...

  return (<div>...</div>);
}

// Toolbar which can do things to the canvas
const Toolbar = (props) => {
  console.log("Toolbar", props.canvasRef)

  // ...
}

// Parent which collects the ref from Canvas and passes to Toolbar
const CanvasView = (props) => {
  const canvasRef = useRef(null);

  return (
    <Toolbar canvasRef={canvasRef} />
    <Canvas getRef={ ref => canvasRef.current = ref.current } />
}