流星 - 子から親に値を取得

Question

達成しようとしているもの：入れ子要素からデータを取得します。

私はそれを達成しようとしました：子の属性を使用して、親の要素を取得します。 this.refsには、上位コンポーネントにはrefsしか含まれていないように見えるため、機能しません。

SubmitStoryForm.jsxは、ネストされたコンポーネントTextInput.jsxを持ちます。これは、単純な<input />コンポーネントです。

<TextInput label="Story name" refer="titleInput" /> 
<textarea className="materialize-textarea" ref="bodyInput" /> 

refer属性がTextInputにref属性に入れているものです：：textarea要素理由のため

import React, {Component, PropTypes,} from 'react'; 

export default class TextInput extends Component { 
    render() { 
    const refer = this.props.refer; 
    console.log(refer); 
    const id = 'id_'+refer; 
    const type = this.props.type; 
    const col = this.props.col; 
    const label = this.props.label; 
    return (
     <div className= 
     {col ? 'input-field col ' + col : 'input-field col s3'}> 
      <input 
      placeholder={this.props.placeholder} 
      id={id} 
      ref={refer} 
      type={type ? type : 'text'} /> 
      {label ? 
      <label for={id}> 
       {this.props.label} 
      </label> : ''} 
     </div> 
    ) 
    } 
} 

TextInput.propTypes = { 
    refer: PropTypes.string.isRequired, 
}; 

作品罰金

は、だから、私は、フォームに2つの要素、SubmitStoryForm.jsxを持っています親にはref属性が定義されています。しかし、その責任を子供に渡すと、TextInput、refは利用できません。

このコードはどのように構造化する必要がありますか？

this.refs.titleInput.value 

SubmitStoryForm.jsxで

が、

this.refs.bodyInput.value 

が正常に動作します：私はしようとすると、

コード

は失敗します。

エラー：

Uncaught TypeError: Cannot read property 'value' of null 

Answer 1

あなたは子コンポーネントのデータへの親のアクセス権を与えることをrefsを使用できますが、あなたは本当にいけません。 （Netflixは反応の重いユーザで、ルールはであり、これまでには参照はありませんthis video、約10mから） すべてのケースの99.9％で、refsを使用できるものは、他の方法ではより良く解決できます。
あなたの例では、親が参照文献を通じて、子供のデータにアクセスする必要はありませんが：

• データが子小道具程度であれば、親がすでにデータを知っているので、：何レフリーは必要ありません。
• データが子の状態に関するものである場合、そのデータにアクセスするためにrefsを使用することは本当に不正です。反応：状態はコンポーネントの外部から直接アクセス可能ではないと想定されます。
• データが子の小道にも子の状態にもない場合、アプリに関連するデータは小道具または州のいずれかでなければならないため、おそらく設計の省略を修正することになります。あなたのケースでは

、より良いとref -lessソリューションは次のようになります。

• あなたにTextAreaのonChange()ハンドラを追加
• textInputValueの状態を追加することで、あなたの親コンポーネントのステートフルを作成し、textAreaValue親（このコンポーネントは親によって直接レンダリングされているため）、状態
• がとchangeHandler={this.textInputChangeHandler}を<TextInput>コンポーネントに渡します。あなたの<TextInput>コンポーネントで
• 、あなたの親の変化ハンドラ状態
• を更新するために、親のメソッドを呼び出して入力コンポーネントにonChange={this.props.changeHandler}を追加するには、フィールドの新しい値を取得するためにevent.target.valueを読むことができます。

このようにすると、入力値が親の状態になり、そのうちの1つを小道具として子に渡します。

ボーナス：フォームを送信するコードでは、すべてのフィールドをもう一度読む必要はありません。 this.stateからすべての情報を取得してどこにでも簡単に送信できます。