固定データテーブル2 - テーブルセルを更新しないで反応しない

Question

私は自分のカスタムセルタイプで動作する固定データテーブルの実装を行っています。

テキストセルは編集することができ、valueプロパティのみを含むStateを含むことがあります。

次に、入力がフォーカスを失って起動し、テーブル状態でデータを更新した後に発生するonBlurイベントが発生しました。 これはすべて正常に動作します。

予想される動作/現在の動作

しかし、私のデータの変更改ページから、またはイベントを並べ替える私はコンストラクタに状態を設定していますので、私の携帯のは、新しい値で状態を更新していないとき一度だけ実行されます。

ステップ

var Table = FixedDataTable.Table; 
var Column = FixedDataTable.Column; 
var Cell = FixedDataTable.Cell; 

//Custom header cell 
var MyHeaderCell = React.createClass({ 
    mixins: [React.addons.PureRenderMixin], 

    render: function() { 
    return <Cell {...this.props}>Column: {this.props.columnKey}</Cell>; 
    } 
}) 

//Custom cell 
var MyCell = React.createClass({ 
    mixins: [React.addons.PureRenderMixin], 

    getInitialState: function() { 
    return { 
     value: this.props.data[this.props.rowIndex][this.props.columnKey] 
    }; 
    }, 

    render: function() { 
    return <Cell {...this.props}>Cell: {this.state.value}</Cell>; 
    } 
}) 

var MyTable = React.createClass({ 
    mixins: [React.addons.PureRenderMixin], 

    render: function() { 
    var width = this.props.width; 
    var height = this.props.height; 
    var data = this.props.data; 

    return (
     <Table 
     rowHeight={50} 
     rowsCount={data.length} 
     width={width} 
     height={height} 
     headerHeight={50} 
     > 
     {this.createColumns()} 
     </Table> 
    ); 
    }, 

    createColumns: function() { 
    var width = this.props.width; 
    var data = this.props.data; 
    var columnCount = data[0].length; 
    var columns = []; 
    for (let i = 0; i < columnCount; i++) { 
    columns.push(
     <Column 
      key={i} 
      columnKey={i} 
      header={<MyHeaderCell />} 
      cell={<MyCell data={data} />} 
      width={width/columnCount} 
     /> 
    ) 
    } 

    return columns; 
    } 
}) 

var container = document.getElementById('container'); 

// Table data as a list of array. 
var myData = [ 
    ['a1', 'b1', 'c1'], 
    ['a2', 'b2', 'c2'], 
    ['a3', 'b3', 'c3'], 
    // .... and more 
]; 

function changeData() { 
var temp = myData.slice(); 
debugger; 
var iR = 0; 
    var newData = [ 
    ['x1', 'k1', 'w1'], 
    ['x2', 'k2', 'w2'], 
    ['x3', 'k3', 'w3'], 
    // .... and more 
]; 
    myData = newData; 
    render(); 
} 

// Render your table 
function render() { 
    var height = container.offsetHeight; 
    var width = container.offsetWidth; 
    ReactDOM.render(<div><button onClick={changeData}>Change Data</button><MyTable height={height} width={width} data={myData} /></div>, 
    document.getElementById('container')); 
} 

window.onresize = render; 
render(); 

JSFiddle

ChangeDataをクリックし、何が起こる（バグを）再現していますが、次のコードを変更した場合：

{this.state.value}

にします

this.props.data[this.props.rowIndex][this.props.columnKey]

です。

どのようにして状態をコンストラクタで新しい値にすることができるのですか？

Answer 1

あなたが直面している問題は、コンポーネントがマウントされているために状態が変更されたためですが、状態が再び変更されることはありません。新しい小道具が渡されたときに状態を更新するためにcomponentWillReceivePropsを追加すると、問題が解決されます。

ここ

the fiddle

var Table = FixedDataTable.Table; 
var Column = FixedDataTable.Column; 
var Cell = FixedDataTable.Cell; 

//Custom header cell 
var MyHeaderCell = React.createClass({ 
    mixins: [React.addons.PureRenderMixin], 

    render: function() { 
    return <Cell {...this.props}>Column: {this.props.columnKey}</Cell>; 
    } 
}) 

//Custom cell 
var MyCell = React.createClass({ 
    mixins: [React.addons.PureRenderMixin], 
    getInitialState: function() { 
    return { 
     value: this.props.data[this.props.rowIndex][this.props.columnKey] 
    }; 
    }, 

    componentWillReceiveProps(nextProps){ 
    this.setState({ value: nextProps.data[nextProps.rowIndex][nextProps.columnKey]}); 
    }, 

    render: function() { 
    return <Cell {...this.props}>Cell: {this.state.value}</Cell>; 
    } 
}) 

var MyTable = React.createClass({ 
    mixins: [React.addons.PureRenderMixin], 

    render: function() { 
    return (
     <Table 
     rowHeight={50} 
     rowsCount={this.props.data.length} 
     width={this.props.width} 
     height={this.props.height} 
     headerHeight={50} 
     > 
     {this.createColumns()} 
     </Table> 
    ); 
    }, 

    createColumns: function() { 
    var columns = []; 
    for (let i = 0; i < this.props.data[0].length; i++) { 
    columns.push(
     <Column 
      key={i} 
      columnKey={i} 
      rowIndex={this.props.data[0]} 
      header={<MyHeaderCell />} 
      cell={<MyCell data={this.props.data} />} 
      width={this.props.width/this.props.data[0].length} 
     /> 
    ) 
    } 

    return columns; 
    } 
}) 

var Container = React.createClass({ 

    getInitialState: function() { 
    return { 
     iR: [ 
     ['a1', 'b1', 'c1'], 
     ['a2', 'b2', 'c2'], 
     ['a3', 'b3', 'c3'], 
     ] 
    }; 
    }, 
    changeData: function() { 
    var newiR = [ 
     ['x1', 'k1', 'w1'], 
     ['x2', 'k2', 'w2'], 
     ['x3', 'k3', 'w3'], 
    ]; 
    this.setState({ iR: newiR }); 
    }, 

    render: function() { 
    return (
     <div> 
     <button onClick={this.changeData}>Change Data</button> 
     <MyTable height={this.props.height} width={this.props.width} data={this.state.iR} /> 
     </div> 
    ); 
    } 
}) 

var container = document.getElementById('container'); 

// Render your table 
function render() { 
    var height = container.offsetHeight; 
    var width = container.offsetWidth; 
    ReactDOM.render(<Container height={height} width={width}/>, 
    document.getElementById('container')); 
} 

window.onresize = render; 
render(); 

私はちょうどリアクトと、それは一貫性を保つためにいくつかのコードを移動しました。

私は強くあなたに感謝し、それは男を働いているあなたはReact Component Cycle Life