Question

我有一个功能

onSelectRow(key){
  // console.log(key,tableData[key]);
      this.setState({
        rowSelectKey : key,
        rowSelectValue: tableData[key]
      });
}

TableUser类中的

。我在<Table>属性中使用它。

<Table
      height={this.state.height}
      fixedHeader={this.state.fixedHeader}
      fixedFooter={this.state.fixedFooter}
      selectable={this.state.selectable}
      multiSelectable={this.state.multiSelectable}
      onRowSelection={this.onSelectRow}
    >

现在，当选择表格行时，我可以看到控制台Uncaught TypeError: this.setState is not a function中发现错误

但如果我使用onSelectRow的箭头功能，那么流程顺利，但表格行复选框无效。

N.B：我尝试使用绑定，同样的复选框问题依然存在，但功能还算不错。

更新：

这是表格的代码，我从后端渲染值。我正在选择<Table>的行数据进行编辑或删除它。

要选择<Table>行我正在使用方法onSelectRow()，这就是我使用箭头功能，这会阻止我选择表格的行。

export default class TableUser extends React.Component {
componentDidMount(){
this.props.dispatch(getUserList())
//this.setState({tableData:this.props.userList})
}
constructor(props) {
super(props);
this.state = {
    fixedHeader: true,
    fixedFooter: true,
    stripedRows: true,
    showRowHover: false,
    selectable: true,
    multiSelectable: false,
    enableSelectAll: true,
    deselectOnClickaway: true,
    showCheckboxes: true,
    tableData: [], //initial state for tableData
    rowSelectKey : '',
    rowSelectValue: ''
}
// this.onSelectRow=this.onSelectRow.bind(this);
}
onSelectRow=(key)=>{
// console.log(this.state.key,this.state.tableData[key]);
  this.setState({
    rowSelectKey : this.state.key,
    rowSelectValue: this.props.userList[key],
  });
  // this.state.rowSelectKey=key;
  // this.state.rowSelectValue=tableData[key];
}
render() {
return (
    <MuiThemeProvider muiTheme={muiThemebtn}>
  <div className="table">
   <br/>
   <Table
      height={this.state.height}
      fixedHeader={this.state.fixedHeader}
      fixedFooter={this.state.fixedFooter}
      selectable={this.state.selectable}
      multiSelectable={this.state.multiSelectable}
      onRowSelection={this.onSelectRow}
    >
      <TableHeader
        displaySelectAll={this.state.showCheckboxes}
        adjustForCheckbox={this.state.showCheckboxes}
        enableSelectAll={this.state.enableSelectAll}
      >
        <TableRow>
          <TableHeaderColumn colSpan="4" tooltip="" style={{textAlign: 'left',fontSize:'16',
            fontWeight:'700',color:'black'}}>
            <p style={{float:'left',marginTop:'7px'}}>Users</p>
            <FlatButton
              icon={<ContentAddBox />}
              style={{float: 'left'}}
            />
            <div className="manageedituserbtn">
              <DeleteModal/>
            </div>
            <div className="manageedituserbtn">
              <EditModal/>
            </div>
            <FlatButton
              icon={<SocialShare/>}
              style={{float: 'right'}}
            />
            <FlatButton
              icon={<MapsLocalOffer/>}
              style={{float:'right'}}
            />            
          </TableHeaderColumn>
        </TableRow>
        <TableRow>
          <TableHeaderColumn tooltip="Name">Name</TableHeaderColumn>
          <TableHeaderColumn tooltip="Role">Role</TableHeaderColumn>
          <TableHeaderColumn tooltip="Phone">Phone</TableHeaderColumn>
          <TableHeaderColumn tooltip="Email">Email</TableHeaderColumn>
        </TableRow>
      </TableHeader>
      <TableBody
        displayRowCheckbox={this.state.showCheckboxes}
        deselectOnClickaway={this.state.deselectOnClickaway}
        showRowHover={this.state.showRowHover}
        stripedRows={this.state.stripedRows}
      >
          {this.props.userList.map((row, index) => ( 
          <TableRow key={index}>
            <TableRowColumn>{row.name}</TableRowColumn>
            <TableRowColumn>{row.role}</TableRowColumn>
            <TableRowColumn>{row.phone}</TableRowColumn>
            <TableRowColumn>{row.email}</TableRowColumn>
          </TableRow>
          ))}
      </TableBody>
    </Table>
  </div>
  </MuiThemeProvider>
);

} };

现在您能告诉我，为什么我无法点击<Table>行的复选框？

Answer 1

首先我认为它应该是

onRowSelection={(key) => this.onSelectRow(key) }

而不是

onRowSelection={this.onSelectRow}

你必须传递密钥，我不知道你在哪里得到密钥。

然后根据你的反应风格，你必须将onSelectRow绑定到哪里，如果你正在使用类，那么它应该在构造函数中

class Component extends React.Components{
    constructor(props){
        super(props);
        this.onSelectRow = this.onSelectRow.bind(this);
    }
...
...
}

在ES6类中使用箭头进行函数声明不是标准，因为babel

会起作用

您可能希望提供完整的组件代码，因此我们可以提供进一步的帮助

未捕获的TypeError：this.setState不是函数

1 个答案: