0
私は今接触しています子供から親に状態を取得する方法
私は2つのコンポーネントを持っています。親Square、子供。
私はsetValues cellTopとcellLeftをから親にして使いたいと思っています。
どうすればいいですか？
私のコードは、私はすべてのコンポーネントの状態を使用しないように、あなたをお勧めします怒鳴る
var Square = React.createClass({
\t getInitialState: function() {
\t \t return {
\t \t countRow: 4,
\t \t countCol: 4,
\t \t mouseOnTable: false,
\t \t onDelRow: false,
\t \t onDelCol: false
\t \t }
\t },
\t appendCol: function() {
\t \t var countColNew = this.state.countCol + 1;
\t \t this.setState({countCol: countColNew}); //change initiale state "countCol" (add new column)
\t \t //console.log(this.state.countCol)
\t },
\t appendRow: function() {
\t \t var countRowNew = this.state.countRow + 1;
\t \t this.setState({countRow: countRowNew}); //change initiale state "countRow" (add new row)
\t \t //console.log(this.state.countRow)
\t },
\t deleteCol: function() {
\t \t var countColNew = this.state.countCol - 1;
\t \t this.setState({countCol: countColNew}); //change initiale state "countCol" (delete col)
\t \t //console.log(this.state.countCol)
\t },
\t deleteRow: function() {
\t \t var countRowNew = this.state.countRow - 1;
\t \t this.setState({countRow: countRowNew}); //change initiale state (delete row)
\t \t //console.log(this.state.countRow)
\t },
\t hiddenButtons: function(){
\t \t var mouseOnTableNew = true;
\t \t this.setState({mouseOnTable: mouseOnTableNew})
\t },
\t showButtons: function(){
\t \t var mouseOnTableNew = false;
\t \t this.setState({mouseOnTable: mouseOnTableNew})
\t },
\t render: function() {
\t \t var timeOut;
\t \t return (
\t \t \t <div className='square'>
\t \t \t \t <table className='square__table'
\t \t \t \t \t \t onMouseOver={this.hiddenButtons} \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t onMouseLeave={() => {timeOut=setTimeout(this.showButtons,200)}}>
\t \t \t \t \t \t \t <Row countRow={this.state.countRow}
\t \t \t \t \t \t \t \t countCol={this.state.countCol}
\t \t \t \t \t \t \t \t ref={(ref) => this.state}
\t \t \t \t \t \t \t \t /> \t \t
\t \t \t \t </table>
\t \t \t \t \t \t \t <button className="square__button square__button_append square__button_col-append"
\t \t \t \t \t \t \t \t \t onClick={this.appendCol}>
\t \t \t \t \t \t \t </button>
\t \t \t \t \t <button className="square__button square__button_delete square__button_col-delete"
\t \t \t \t \t \t \t style={this.state.countCol===1 ||
\t \t \t \t \t \t \t \t this.state.mouseOnTable===false ||
\t \t \t \t \t \t \t \t this.state.onDelRow===true ? {visibility: "hidden"} : {visibility: "visible"}}
\t \t \t \t \t \t \t onClick={this.deleteCol}
\t \t \t \t \t \t \t onMouseOver={() => {clearTimeout(timeOut);
\t \t \t \t \t \t \t \t \t \t \t \t this.setState({onDelCol:true})}}
\t \t \t \t \t \t \t onMouseLeave={() => {this.setState({onDelCol:false})}}>
\t \t \t \t \t </button>
\t \t \t \t \t <button className="square__button square__button_append square__button_row-append"
\t \t \t \t \t \t \t onClick={this.appendRow}>
\t \t \t \t \t </button>
\t \t \t \t \t <button className="square__button square__button_delete square__button_row-delete"
\t \t \t \t \t \t \t style={this.state.countRow===1 ||
\t \t \t \t \t \t \t \t this.state.mouseOnTable===false ||
\t \t \t \t \t \t \t \t this.state.onDelCol===true ? {visibility: "hidden"} : {visibility: "visible"}}
\t \t \t \t \t \t \t onClick={this.deleteRow}
\t \t \t \t \t \t \t onMouseOver={() => {clearTimeout(timeOut);
\t \t \t \t \t \t \t \t \t \t \t \t this.setState({onDelRow:true})}}
\t \t \t \t \t \t \t onMouseLeave={() => {this.setState({onDelRow:false})}}>
\t \t \t \t \t </button>
\t \t \t \t
\t \t \t </div>
\t \t)
\t }
})
//==================================================
var Row = React.createClass({
\t getInitialState: function(){
\t \t return {
\t \t \t cellTop: 0,
\t \t \t cellLeft: 0,
\t \t }
\t },
\t createCol: function() {
\t \t var columns = [];
\t \t for(let i = 0; i < this.props.countCol; i++){
\t \t \t columns.push(this.createCell)
\t \t }
\t \t return columns;
\t },
\t createRow: function (k) {
\t \t return (
\t \t \t <tr key={k}>
\t \t \t \t {this.createCol().map(function(cell,key){
\t \t \t \t \t return (
\t \t \t \t \t \t \t cell(key)
\t \t \t \t \t \t)
\t \t \t \t })}
\t \t \t </tr>
\t \t)
\t },
\t createCell: function(k){
\t \t return (
\t \t \t <td key={k}>
\t \t \t \t <div className="square__cell" onMouseOver={this.getMousePosition}></div>
\t \t \t </td>
\t \t)
\t },
\t getMousePosition: function(element){
\t \t let coordinates = element.target.getBoundingClientRect();
\t \t let top = coordinates.top;
\t \t let left = coordinates.left;
\t \t
\t \t this.setState({
\t \t \t cellTop: top,
\t \t \t cellLeft: left
\t \t })
\t },
\t render: function(){
\t \t \t var lines = []
\t \t \t for (let i = 0; i < this.props.countRow; i++) {
\t \t \t lines.push(this.createRow(i))
\t \t }
\t \t return (
\t \t \t <tbody> \t \t
\t \t \t \t {lines}
\t \t \t </tbody>
\t \t)
\t }
})
、あなたは親 – OverCoder
にチャイルズ、ないチャイルズに親からのデータを渡すことができ、私は宣言することができますこれは親の状態を子供から動的に変えますか？ –
いいえ、別の方向から考える必要があります。親が行をカスタマイズし、行が親をカスタマイズしないようにします。たとえば、行のサイズに基づいて親のサイズを変更する場合は、行を親のサイズでサイズ変更します。 – OverCoder