[英]How to get state from child to parent react
I'm new in React 我是React的新手
I have two components. 我有两个组成部分。 Parent
Square
, child Row
. 父母
Square
,孩子Row
。
I want to get setValues cellTop
and cellLeft
from Row
to parent and use it. 我想从
Row
到父级获取setValues cellTop
和cellLeft
并使用它。
How can I do it. 我该怎么做。
My code is bellow 我的代码在下面
var Square = React.createClass({ getInitialState: function () { return { countRow: 4, countCol: 4, mouseOnTable: false, onDelRow: false, onDelCol: false } }, appendCol: function() { var countColNew = this.state.countCol + 1; this.setState({countCol: countColNew}); //change initiale state "countCol" (add new column) //console.log(this.state.countCol) }, appendRow: function() { var countRowNew = this.state.countRow + 1; this.setState({countRow: countRowNew}); //change initiale state "countRow" (add new row) //console.log(this.state.countRow) }, deleteCol: function() { var countColNew = this.state.countCol - 1; this.setState({countCol: countColNew}); //change initiale state "countCol" (delete col) //console.log(this.state.countCol) }, deleteRow: function() { var countRowNew = this.state.countRow - 1; this.setState({countRow: countRowNew}); //change initiale state (delete row) //console.log(this.state.countRow) }, hiddenButtons: function(){ var mouseOnTableNew = true; this.setState({mouseOnTable: mouseOnTableNew}) }, showButtons: function(){ var mouseOnTableNew = false; this.setState({mouseOnTable: mouseOnTableNew}) }, render: function() { var timeOut; return ( <div className='square'> <table className='square__table' onMouseOver={this.hiddenButtons} onMouseLeave={() => {timeOut=setTimeout(this.showButtons,200)}}> <Row countRow={this.state.countRow} countCol={this.state.countCol} ref={(ref) => this.state} /> </table> <button className="square__button square__button_append square__button_col-append" onClick={this.appendCol}> </button> <button className="square__button square__button_delete square__button_col-delete" style={this.state.countCol===1 || this.state.mouseOnTable===false || this.state.onDelRow===true ? {visibility: "hidden"} : {visibility: "visible"}} onClick={this.deleteCol} onMouseOver={() => {clearTimeout(timeOut); this.setState({onDelCol:true})}} onMouseLeave={() => {this.setState({onDelCol:false})}}> </button> <button className="square__button square__button_append square__button_row-append" onClick={this.appendRow}> </button> <button className="square__button square__button_delete square__button_row-delete" style={this.state.countRow===1 || this.state.mouseOnTable===false || this.state.onDelCol===true ? {visibility: "hidden"} : {visibility: "visible"}} onClick={this.deleteRow} onMouseOver={() => {clearTimeout(timeOut); this.setState({onDelRow:true})}} onMouseLeave={() => {this.setState({onDelRow:false})}}> </button> </div> ) } }) //================================================== var Row = React.createClass({ getInitialState: function(){ return { cellTop: 0, cellLeft: 0, } }, createCol: function() { var columns = []; for(let i = 0; i < this.props.countCol; i++){ columns.push(this.createCell) } return columns; }, createRow: function (k) { return ( <tr key={k}> {this.createCol().map(function(cell,key){ return ( cell(key) ) })} </tr> ) }, createCell: function(k){ return ( <td key={k}> <div className="square__cell" onMouseOver={this.getMousePosition}></div> </td> ) }, getMousePosition: function(element){ let coordinates = element.target.getBoundingClientRect(); let top = coordinates.top; let left = coordinates.left; this.setState({ cellTop: top, cellLeft: left }) }, render: function(){ var lines = [] for (let i = 0; i < this.props.countRow; i++) { lines.push(this.createRow(i)) } return ( <tbody> {lines} </tbody> ) } })
I would recommend you to not use state in components at all. 我建议您完全不要在组件中使用状态。 This just leads to problems when you want to control parent component from child.
当您要控制子组件的父组件时,这只会导致问题。
Instead, 代替,
Look at https://github.com/reflux/refluxjs 看看https://github.com/reflux/refluxjs
+---------+ +--------+ +-----------------+
¦ Actions ¦------>¦ Stores ¦------>¦ View Components ¦
+---------+ +--------+ +-----------------+
^ ¦
+--------------------------------------+
You can pass your child component a callback function that accepts two arguments, cellTop
and cellLeft
. 您可以为子组件传递一个回调函数,该函数接受两个参数
cellTop
和cellLeft
。 In your child component pass cellTop
and cellLeft
values at the same time you are calling getMousePosition()
function in your child component. 在子组件中,同时调用
cellTop
和cellLeft
值,这是在子组件中调用getMousePosition()
函数。
In your parent component create a function like this: 在您的父组件中创建一个类似以下的函数:
handleSizeChange: function(cellTop, cellLeft){
this.setState({
cellTop: cellTop,
cellLeft: cellLeft
})
},
In your Parent <Row>
component pass a callback function as a prop like this: 在您的Parent
<Row>
组件中,传递一个回调函数作为道具,如下所示:
<Row countRow={this.state.countRow}
countCol={this.state.countCol}
ref={(ref) => this.state}
onSizeChange={this.handleSizeChange}
/>
In your Child component add this.props.handleSizeChange(top, left)
to your getMousePostion()
function: 在您的Child组件中,将
this.props.handleSizeChange(top, left)
添加到getMousePostion()
函数中:
getMousePosition: function(element){
let coordinates = element.target.getBoundingClientRect();
let top = coordinates.top;
let left = coordinates.left;
this.setState({
cellTop: top,
cellLeft: left
})
this.props.handleSizeChange(top, left)
},
Its also true that whenever possible its best for data to flow from Parent
-> Child
components, but callback functions are common for things like button events. 同样的事实是,只要有可能,数据就最好从
Parent
-> Child
组件中流出来,但是回调函数对于按钮事件之类的东西是很常见的。 You could use something like Redux to handle state management, but that is fairly advanced and is probably overkill if this is a simple beginner application. 您可以使用Redux之类的东西来处理状态管理,但这是相当先进的,如果这是一个简单的初学者应用程序,则可能会过大。
Also, you should be using the newest React syntax for components. 另外,您应该对组件使用最新的React语法。 Create new classes like this:
创建这样的新类:
import React, { Component } from 'react'
class App extends Component {
constructor() {
super()
//getinitialstate
this.state = {
cellTop: 0,
cellLeft: 0
}
}
}
and define class methods like this: 并定义这样的类方法:
componentWillMount() {
// this runs right before the <App> is rendered
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.