が反応：材料-UIのTableRowを選択することはできません、SETSTATEを使用している場合onRowSelection

Question

に

私は材料-UI table を持っていると私はDELETEボタンに機能するように選択された行を渡したいです。

constructor(props) { 
     super(props); 
     this.state = { 
      selectedRows: 'none', 
     }; 
     } 

    onRowSelection(val){ 
    console.log(this); 
    this.setState({ 
     selectedRows: val, 
    }); 
    } 

render() { 
<Table 
       fixedHeader={true} 
       selectable={true} 
       multiSelectable={true} 
       onRowSelection={this.onRowSelection.bind(this)} 
      > 
    ... 
       <TableFooter adjustForCheckbox={true}> 
       <TableRow> 
        <TableRowColumn colSpan="5" style={{textAlign: 'right'}}> 
        <RaisedButton 
        primary={true} 
        label="DELETE" 
        labelPosition="after" 
        icon={<ActionDelete/>} 
        onClick={this.props.onDelete.bind(this.state.selectedRows)} 
        /> 
        </TableRowColumn> 
       </TableRow> 
       </TableFooter> 
</Table> 
} 

私はthis.props.onDelete関数にthis.state.selectedRowsを渡したいが、このissueにreffered として、材料-UIはonRowSelectionでSETSTATEに問題があります。

私はそれを修正することがどのように、選択された行にアクセスするには、そこに別の方法は、いくつかの関数に渡す&、なぜこのようなエラーが存在している（私は親コンポーネントにSETSTATEを使用する場合、なぜonRowSelection心？）

Answer 1

ようonClickに関数を渡す必要があり、それぞれがレンダリングその確認のステータスをリセットする材料-UIのテーブルの場合には問題があります。 この問題を解決するには、setTimeoutを使用してチェック状態を復元し、チェック配列を自分で管理する必要があります。このバグが修正されるまで少なくとも。今あなたがチェック状態を自分で維持することが

  <TableRow key={index} 
       selected={this.state.selectedRows.indexOf(index) !== -1}> 
      </TableRow> 

あなたがチェック/チェックを外しコールを受け入れるための機能を持っているし、復元する必要があります：

state = { 
    selectedRows: [], 
    }; 

レンダリング、これを追加します。状態の が、これは持っています

onRowSelection(selectedRows) { 
    if (selectedRows.length === 0) { // due to a bug in material-ui 
     setTimeout(() => { this.setState({ selectedRows: this.state.selectedRows }) }, 100); 
     return; 
    }; 
    this.setState({ selectedRows }); 
    } 

と

のように、すべての要求をオフに0

と

constructor(props) { 
    super(props); 
    this.onRowSelection = this.onRowSelection.bind(this); 
    } 

ます。また、ユーザーがすべてのチェックを外すことを可能にするボタンを追加する必要があります。

Answer 2

私はこの問題を考えますここにあなたがbind機能を使用している方法です。 bind関数の最初のパラメーターはthisArgで、2番目のパラメーターは結果関数に渡すものです。ですから、この

onClick={this.props.onDelete.bind(this, this.state.selectedRows)}