質問

ReactJSの最初の一歩を踏み出し、親と子の間のコミュニケーションを理解しようとしています。 私はフォームを作っているので、フィールドにスタイルを付けるためのコンポーネントを持っています。そしてまた、フィールドを含み、それをチェックする親コンポーネントもあります。例

var LoginField = React.createClass({
    render: function() {
        return (
            <MyField icon="user_icon" placeholder="Nickname" />
        );
    },
    check: function () {
        console.log ("aakmslkanslkc");
    }
})

var MyField = React.createClass({
    render: function() {
...
    },
    handleChange: function(event) {
//call parent!
    }
})

何か方法はないでしょうか。また、私のロジックはreactjs "world"でいいのでしょうか？お時間をいただきありがとうございます。

どのように解決するのですか？

2019年アップデートでreact 16+とES6を搭載

からの投稿です。 React.createClass はreactバージョン16から非推奨となり、新しいJavascript ES6がより多くの利点を与えてくれるでしょう。

親

import React, {Component} from 'react';
import Child from './Child';
  
export default class Parent extends Component {

  es6Function = (value) => {
    console.log(value)
  }

  simplifiedFunction (value) {
    console.log(value)
  }

  render () {
  return (
    <div>
    <Child
          es6Function = {this.es6Function}
          simplifiedFunction = {this.simplifiedFunction} 
        />
    </div>
    )
  }

}

子

import React, {Component} from 'react';

export default class Child extends Component {

  render () {
  return (
    <div>
    <h1 onClick= { () =>
            this.props.simplifiedFunction(<SomethingThatYouWantToPassIn>)
          }
        > Something</h1>
    </div>
    )
  }
}

ES6定数としての簡易ステートレス・チャイルド

import React from 'react';

const Child = (props) => {
  return (
    <div>
    <h1 onClick= { () =>
        props.es6Function(<SomethingThatYouWantToPassIn>)
      }
      > Something</h1>
    </div>
  )

}
export default Child;