0

私は現在、プレゼンテーション コンポーネントとコンテナー コンポーネントを使用して meteor の simple-todos チュートリアルをリファクタリングしようとしていますが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"
      />
    )   
  }
}

refs を使用して、入力の値を囲んで検索します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ですか?

4

2 に答える 2

0

ref を使用する場合は、ステートフル コンポーネントを使用する必要があります。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}
  />
);

アプリ- これはコンテナ コンポーネントです

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

ご覧のとおり、Input コンポーネントはステートレスで、AppWrapper はステートフルです。を使用ReactDOM.findDOMNodeせずに、textInput に直接アクセスできるようになりました。入力には、name参照される属性が必要です。

<form>タグを App コンポーネントに移動することで、これを簡素化できます。これにより、1つが削除されrefます。

于 2016-07-22T02:11:32.123 に答える