将状态数据发送到父组件

时间:2018-02-17 18:15:23

标签: javascript reactjs react-dom

关于这个主题的许多类似的帖子都出现了,但是在我的应用程序的上下文中没有一个是有意义的,所以我发布这个,让我知道它是否重复并且它已经有了答案。

Circle组件,使用div事件处理程序呈现简单的onMouseMove元素。调用UpdateCoords函数,该函数在该元素上发送指针的位置,该元素存储为state

this.state = {
    position: {x: null, y: y}
};

我有一个父组件Main,它会呈现Circle组件,现在我认为我需要使用state组件中Circle的值,但我是不太确定如何。

1 个答案:

答案 0 :(得分:1)

如果要将数据从父级传递给子级,则使用道具,从子级到父级时使用回调函数。

主要组件



class Main extends React.Component {
  constructor( props ) {
    super(props);
    this.state = {
      position: { x: null, y: null}
    };
  }
  
  updateCoords = (x , y) => {
    this.setState({
      position: {
        x, y
      }
    });
  }
  
  render(){
    return(
        <div className='main-container'>
            <Circle mouseMove={ this.updateCoords }/>
            <pre>
              <p> x - y:  {this}</p>
            </pre>
        </div>
    );
  }
}
&#13;
&#13;
&#13;

圆形组件

&#13;
&#13;
class Circle extends React.Component {
    constructor(props){
      super(props);
      this.state = {
          position: {x: null, y: null}
      }
      
      this.updateCoords = this.updateCoords.bind( this );
    }
    
    updateCoords( evt ){
        let x = evt.clientX;
        let y = evt.clientY;
    
        this.setState({
            position: {
                x: x,
                y: y,
            }
        });
        
        this.props.mouseMove(x, y);
    
        console.log("Clicked");
    }
  
    render() {
      return( 
          <div className="circle" onMouseMove={ this.updateCoords }>
              <span>
              x: {this.state.position.x}, y: {this.state.position.y}
              </span>
          </div> 
      );
    }
}
&#13;
&#13;
&#13;