ReactJS调用父方法

Question

我正在React React中迈出第一步，并试图理解父母与孩子之间的交流。我正在制作表单，所以我具有用于样式字段的组件。而且我还有包含字段并对其进行检查的父组件。例：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”上好吗？谢谢你的时间。

Answer 1

您可以使用任何父方法。为此，您应该像任何简单值一样，将此方法从您的父级发送给您的孩子。您可以一次使用父级的许多方法。例如：

var Parent = React.createClass({

    someMethod: function(value) {

        console.log("value from child", value)

    },

    someMethod2: function(value) {

        console.log("second method used", value)

    },

    render: function() {

      return (<Child someMethod={this.someMethod} someMethod2={this.someMethod2} />);

    }

});

并将其像这样用于Child（用于任何操作或任何子方法）：

var Child = React.createClass({

    getInitialState: function() {

      return {

        value: 'bar'

      }

    },

    render: function() {

      return (<input type="text" value={this.state.value} onClick={this.props.someMethod} onChange={this.props.someMethod2} />);

    }

});

Answer 2

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>

    )

  }

}

简化为SE6常数的无状态子级

import React from 'react';

const Child = () => {

  return (

    <div>

    <h1 onClick= { () =>

        this.props.es6Function(<SomethingThatYouWantToPassIn>)

      }

      > Something</h1>

    </div>

  )

}

export default Child;