ReactJS 调用父方法2019 年使用 react 16+ 和 ES6 进行更新

javascript reactjs

2022-08-30 02:00:21

我正在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 的“世界”中是好的吗？感谢您抽出宝贵时间接受采访。

答案 1

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

例如：

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

在上面的示例中，使用和的属性进行调用。in return 将处理程序绑定到标准元素，并将值传递给的回调（如果已定义）。ParentChildvalueonChangeChildonChange<input />Parent

因此，调用的方法是，第一个参数是中字段的字符串值。结果是可以使用该值更新的状态，从而导致父元素在的输入字段中键入新值时使用新值进行更新。ParentchangeHandler<input />ChildParent<span />Child

答案 2

2019 年使用 react 16+ 和 ES6 进行更新

发布此内容已从 react 版本 16 中弃用，新的 Javascript ES6 将为您提供更多好处。React.createClass

父母

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;