ステートフルコンポーネントでのREFへのアクセスは、Reactでは機能しませんか？

Question

私は現在、プレゼンテーションコンポーネントとコンテナコンポーネントを使用して流星のチュートリアルをリファクタリングしようとしていますが、機能的なステートレスコンポーネントのinputのリファレンスにアクセスしようとすると問題に遭遇しました。 refsにアクセスするには、inputで行ったステートフルコンポーネントでコンポーネントをラップする必要があることがわかりました。

// import React ... 
import Input from './Input.jsx'; 

const AppWrapper = (props) => { 
    // ... more lines of code 

    <form className="new-task" onSubmit={props.handleSubmit}> 
    <Input /> 
    </form> 
} 

import React, { Component } from 'react'; 

この入力はクラス構文を使用しているため、ステートフルでなければなりません。

export default class Input extends Component { 

    render() { 
    return (
     <input 
     type="text" 
     ref="textInput" 
     placeholder="Type here to add more todos" 
     /> 
    ) 
    } 
} 

ref30を使用して、AppContainerを含む入力値を検索します。

import AppWrapper from '../ui/AppWrapper.js'; 

handleSubmit = (event) => { 
    event.preventDefault(); 
    // find the text field via the React ref 
    console.log(ReactDOM.findDOMNode(this.refs.textInput)); 
    const text = ReactDOM.findDOMNode(this.refs.textInput).value.trim(); 
    ... 
} 

にconsole.logの結果はので、私の入力コンポーネントは、ステートフルされていない、nullのですか？このコンポーネントをステートフルにするためにthis.stateの値を設定するコンストラクタを設定する必要がありますか、またはrefsを使用する必要があるときに機能的なステートレスコンポーネントを使用しないでください。

Answer 1

または、refsを使用する必要があるときに機能的なステートレスコンポーネントを使用することをあきらめるべきですか？

はい。コンポーネントがレンダリングする要素への参照を保持する必要がある場合、ステートフルです。

参考文献は、そのような「コールバック」機能を設定することができます：あなたはレフリーを使用するときにステートフルなコンポーネントを使用する必要が

export default class Input extends Component { 

    render() { 
    // the ref is now accessable as this.textInput 
    alert(this.textInput.value) 
    return ( 
     <input 
     type="text" 
     ref={node => this.textInput = node} 
     placeholder="Type here to add more todos" 
     /> 
    ) 
    } 
} 

Answer 2

。 handleSubmitイベントでは、フィールドが別のコンポーネントにあるときにthis.refsを呼び出しています。

refを使用するには、AppWrapperをレンダリングする場所にrefを追加します.AppWrapper自体はステートフルでなければなりません。

はここに例を示します

AppWrapper - このフォームで

class AppWrapper extends React.Component { 
    render() { 
    return (
     <form 
     ref={f => this._form = f} 
     onSubmit={this.props.handleSubmit}> 
     <Input 
      name="textInput" 
      placeholder="Type here to add more todos" /> 
     </form> 
    ); 
    } 
}; 

入力 - これは、再利用可能なテキストボックスコンポーネント

const Input = (props) => (
    <input 
    type="text" 
    name={props.name} 
    className="textbox" 
    placeholder={props.placeholder} 
    /> 
); 

のAppである - これは、コンテナ構成要素

class App extends React.Component { 
    constructor() { 
    super(); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 
    const text = this._wrapperComponent._form.textInput.value; 
    console.log(text); 
    } 

    render() { 
    return (
     <AppWrapper 
     handleSubmit={this.handleSubmit} 
     ref={r => this._wrapperComponent = r} 
     /> 
    ); 
    } 
} 

http://codepen.io/jzmmm/pen/BzAqbk?editors=0011

あなたが見ることができるように、入力コンポーネントはステートレスであり、AppWrapperは、ステートフルです。 ReactDOM.findDOMNodeの使用を避け、textInputに直接アクセスできます。入力にはname属性を参照する必要があります。

これを簡略化するには、<form>タグをAppコンポーネントに移動します。これにより、refが削除されます。