将状态数据向下发送到父组件

Question

关于这个主题有很多类似的帖子，但其中 none 对我的应用程序来说是有意义的，所以我发布这个，让我知道它是否重复并且它有答案已经。

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

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

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

Answer 1

当您想将数据从父级传递给子级时，您使用 props，当您从子级传递给父级时，使用回调函数。

主要成分

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

圆形组件

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

将状态数据向下发送到父组件

Sending state data down to parent component

javascript

reactjs

react-dom