Tôi đang thực hiện bước đầu tiên trong ReactJS và cố gắng hiểu giao tiếp giữa cha mẹ và con cái. Tôi đang tạo mẫu, vì vậy tôi có thành phần cho các trường kiểu dáng. Và tôi cũng có thành phần cha mẹ bao gồm trường và kiểm tra nó. Thí dụ:

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!
    }
})

Có cách nào để làm điều đó. Và logic của tôi có tốt trong "thế giới" không? Cảm ơn vì đã dành thời gian cho tôi.

Để làm điều này, bạn chuyển một cuộc gọi lại như một tài sản cho đứa trẻ từ cha mẹ.

Ví dụ:

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

Trong ví dụ trên, Parentcác cuộc gọi Childvới một thuộc tính của valuevà onChange. Các Childđổi lại liên kết với một onChangexử lý để một tiêu chuẩn <input />phần tử và vượt qua giá trị lên đến Parent's gọi lại nếu nó được xác định.

Kết quả Parentlà changeHandlerphương thức của được gọi với đối số đầu tiên là giá trị chuỗi từ <input />trường trong Child. Kết quả là Parenttrạng thái của có thể được cập nhật với giá trị đó, khiến <span />phần tử của cha mẹ cập nhật với giá trị mới khi bạn nhập nó Childvào trường nhập của.

Bạn có thể sử dụng bất kỳ phương thức cha mẹ. Đối với điều này, bạn nên gửi phương thức này từ cha mẹ của bạn cho con bạn như bất kỳ giá trị đơn giản. Và bạn có thể sử dụng nhiều phương pháp từ cha mẹ cùng một lúc. Ví dụ:

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

Và sử dụng nó cho Trẻ em như thế này (cho bất kỳ hành động hoặc vào bất kỳ phương thức con nào):

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

Cập nhật 2019 với phản ứng 16+ và ES6

Đăng bài này vì React.createClasskhông được phản hồi từ phiên bản 16 phản ứng và Javascript ES6 mới sẽ mang lại cho bạn nhiều lợi ích hơn.

Cha mẹ

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

}

Đứa trẻ

import React, {Component} from 'react';

export default class Child extends Component {

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

Trẻ không quốc tịch được đơn giản hóa như hằng số ES6

import React from 'react';

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

}
export default Child;

Truyền phương thức từ Parentthành phần xuống dưới dạng thành phần propcủa bạn Child. I E:

export default class Parent extends Component {
  state = {
    word: ''
  }

  handleCall = () => {
    this.setState({ word: 'bar' })
  }

  render() {
    const { word } = this.state
    return <Child handler={this.handleCall} word={word} />
  }
}

const Child = ({ handler, word }) => (
<span onClick={handler}>Foo{word}</span>
)

Sử dụng chức năng | | thành phần không quốc tịch

Thành phần phụ huynh

 import React from "react";
 import ChildComponent from "./childComponent";

 export default function Parent(){

 const handleParentFun = (value) =>{
   console.log("Call to Parent Component!",value);
 }
 return (<>
           This is Parent Component
           <ChildComponent 
             handleParentFun={(value)=>{
               console.log("your value -->",value);
               handleParentFun(value);
             }}
           />
        </>);
}

Thành phần con

import React from "react";


export default function ChildComponent(props){
  return(
         <> This is Child Component 
          <button onClick={props.handleParentFun("YoureValue")}>
            Call to Parent Component Function
          </button>
         </>
        );
}

Phản ứng 16+

Thành phần con

import React from 'react'

class ChildComponent extends React.Component
{
    constructor(props){
        super(props);       
    }

    render()
    {
        return <div>
            <button onClick={()=>this.props.greetChild('child')}>Call parent Component</button>
        </div>
    }
}

export default ChildComponent;

Thành phần phụ huynh

import React from "react";
import ChildComponent from "./childComponent";

class MasterComponent extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state={
            master:'master',
            message:''
        }
        this.greetHandler=this.greetHandler.bind(this);
    }

    greetHandler(childName){
        if(typeof(childName)=='object')
        {
            this.setState({            
                message:`this is ${this.state.master}`
            });
        }
        else
        {
            this.setState({            
                message:`this is ${childName}`
            });
        }

    }

    render()
    {
        return <div>
           <p> {this.state.message}</p>
            <button onClick={this.greetHandler}>Click Me</button>
            <ChildComponent greetChild={this.greetHandler}></ChildComponent>
        </div>
    }
}
export default  MasterComponent;