子コンポーネントの値をreactjsの親コンポーネントに取得する方法はありますか？

Question

子コンポーネントから値を取得して親コンポーネントで使用したいという問題があります。

これは親コンポーネントであり、値Iを小道具を介して子に渡しています。これを元に戻したいのですが、これをどのように達成できますか？

import React, { Component } from 'react' 
import { render } from 'react-dom' 
import {Row} from 'react-bootstrap'; 
import Rectangle from './Rectangle.js'; 

import '../App.css'; 

class Rect extends Component { 

    constructor(props){ 
    super(props); 
    this.state={ 
     rects:[], 
     img_offset: [], 
     rectStyle: [] 
    }; 
    this.unselectOtherRects = this.unselectOtherRects.bind(this); 
    this.getFirstState = this.getFirstState.bind(this); 
    } 

    unselectOtherRects(e, i){ 
    alert(i) 
    this.getFirstState(); 
    } 

    componentDidMount(){ 
    this.getFirstState(); 
    } 

    getFirstState(){ 
    const img = this.refs.img; 
    var x = img.offsetLeft; 
    var y = img.offsetTop; 
    this.setState({img_offset:[x, y]}); 

    var rects = this.props.rects; 

    var rectangles = []; 
    for (var i = 0; i < rects.length; i++) { 
     rectangles[i] = { 
     border: '1px solid white', 
     position : 'absolute', 
     width : rects[i][0] + 'px', 
     height : rects[i][1] + 'px', 
     left : x + rects[i][2] + 'px', 
     top : y + rects[i][3] + 'px' 
     }; 
    } 

    this.setState({rectStyle:rectangles}); 
    alert("Hiii") 
    var test = this.state.rectStyle; 
    for (var i = 0; i < test.length; i++) { 
     alert(test[i].border) 
    } 
    } 

    render() { 
    let Rectangles; 
    var targetRects = this.state.rectStyle; 


    if (targetRects.length > 0) { 
     Rectangles=(
      <div> 
      {targetRects.map(function(rect, index){ 
      return (
       <Rectangle key={index} i={index} initialState={this.unselectOtherRects.bind(this, i)} coords={this.state.rectStyle[index]}></Rectangle> 
      ) 
      }.bind(this))} 
      </div> 
     ) 
    } 
    else{ 
     Rectangles=(<div></div>) 
    } 

    return (
     <div> 
     <form id="uploadimage" action="" method="post" encType="multipart/form-data"> 
     <Row id="image_preview" className="row"> 
      <span id="photo"> 
      <img ref="img" id="img" src={this.props.path} /> 
      {Rectangles} 
      </span> 
     </Row> 
     </form> 
     </div> 
    ); 
    } 
} 

export default Rect; 

コンポーネントをクリックしてインデックスを直接取得しようとしましたが、機能しなかったため、結果は不定です。

this.state = { valueControlledByChild：ヌル }ここで

とは、例えば、あなたは単に状態として、親コンポーネント内の値を設定することができ、子コンポーネント

import React, { Component } from 'react' 
import { render } from 'react-dom' 
import {Row} from 'react-bootstrap'; 

import '../App.css'; 

class Rectangle extends Component { 

    constructor(props){ 
    super(props); 
    this.state = { 
     coords:this.props.coords 
    } 
    this.onRectClick = this.onRectClick.bind(this); 
    } 

    onRectClick(e){ 

    this.props.initialState(); 
    // var rect_style = this.state.coords; 
    // rect_style.border = '1px solid black'; 
    // this.setState({coords:rect_style}); 

    } 

    render() { 
    return (
     <div onClick={this.onRectClick} style={this.state.coords}></div> 
    ); 
    } 
} 

export default Rectangle; 

Answer 1

、です。子コンポーネントを使用すると、親コンポーネントでこの関数を作成して、子コンポーネントにそれを渡すことができ、この状態変数を変更することができるよう有効にするには

：

setParentState(obj) { 
    Object.keys(obj).forEach((key) => { 
    this.setState({ 
     [key]: obj[key] 
    }); 
    }); 
}; 

render() { 
    ... 
    <ChildComponent setParentState={this.setStateParentState} /> 
} 

この中に追加することを忘れないでくださいあなたの親コンポーネントのコンストラクタ：

this.props.setParentState({ 
    valueControlledByChild: NEW_VALUE 
}); 

0123：

あなたの子コンポーネントで今

this.setParentState = this.setParentState.bind(this); 

、あなたがすることによって、その値を上書きするために簡単に、このメソッドを呼び出すことができます

親コンポーネントでthis.state.valueControlledByChildを参照して、更新された値を取得することができます。