为了账号安全,请及时绑定邮箱和手机立即绑定

ReactJS调用父方法

/ 猿问

ReactJS调用父方法

手掌心 2019-11-26 14:26:16

我正在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”上好吗?谢谢你的时间。


查看完整描述

3 回答

?
扬帆大鱼

为此,您需要将回调作为属性从父级传递到子级。


例如:


var Parent = React.createClass({


    getInitialState: function() {

        return {

            value: 'foo'

        }

    },


    changeHandler: function(value) {

        this.setState({

            value: value

        });

    },


    render: function() {

        return (

            <div>

                <Child value={this.state.value} onChange={this.changeHandler} />

                <span>{this.state.value}</span>

            </div>

        );

    }

});


var Child = React.createClass({

    propTypes: {

        value:      React.PropTypes.string,

        onChange:   React.PropTypes.func

    },

    getDefaultProps: function() {

        return {

            value: ''

        };

    },

    changeHandler: function(e) {

        if (typeof this.props.onChange === 'function') {

            this.props.onChange(e.target.value);

        }

    },

    render: function() {

        return (

            <input type="text" value={this.props.value} onChange={this.changeHandler} />

        );

    }

});

在上面的示例中,Parent调用Child具有value和属性的调用onChange。的Child回报结合一个onChange处理程序,以一个标准的<input />元件,并传递值到Parent如果它定义的回调函数。


结果,调用Parent的changeHandler方法时,第一个参数是的<input />字段中的字符串值Child。结果是Parent可以使用该值更新的状态,从而在<span />您在Child的输入字段中键入新值时,父元素的元素也会更新。


查看完整回答
反对 回复 2019-11-26
?
POPMUISE

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


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} />);

    }

});


查看完整回答
反对 回复 2019-11-26
?
智慧大石

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;


查看完整回答
反对 回复 2019-11-26

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信