Question

我有两个组件，RaisedButton和TableList。 Tablelist返回选择行，并在状态（currentSelectedRows）中更新相同的行。 RaisedButton只是安慰当前的选定行。现在问题陈述：

点击RaisedButton它正确地控制状态（使用approveSelected）直到updateSelectedRows没有更新状态。一旦在updateSelectedRows方法内更新状态，onClick of RaisedButton组件首先调用updateSelectedRows然后调用approveSelected。以下是代码。

export default class MyList extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        pendingList:[],
        currentSelectedRows:[]
    }
}updateSelectedRows(selectedRows){
    console.log("updateCalled");
    this.setState({
        currentSelectedRows:selectedRows
    });
};

approveSelected() {
    console.log("approve selected");
    console.log(this.state.currentSelectedRows);
};
render() {
    return (
        <div className="container">
            <div className="row_align_right">
                <RaisedButton label="APPROVE" backgroundColor={MUIColors.lightGreen500} labelColor={MUIColors.white} onClick={this.approveSelected.bind(this)} />
            </div>
            <div className="content">
                <div className="">
                    <TableList
                        selectedRows={this.state.currentSelectedRows}
                        updateSelectedRows={this.updateSelectedRows.bind(this)}
                    />
                </div>
            </div>
        </div>
    )
}

}

任何建议都会有很大的帮助。

由于

Answer 1

您没有为TableList提供代码，因此很难知道可能出现什么问题，但是当您将行ID向上传递给父代时，它似乎有效：< / p>

＆＃13;

const usersList = [
  { name: 'John', age: 33 },
  { name: 'Jane', age: 32 },
  { name: 'David', age: 28 },
  { name: 'Eve', age: 29 },
];


class Row extends React.Component {
  onClick = e => {
    const { onClick, rowId } = this.props;
    onClick(rowId)
  }

  render() {
    const { user } = this.props;
    return (
      <tr onClick={this.onClick}>
        <td>{user.name}</td>
        <td>{user.age}</td>
      </tr>
    );
  }
}

class TableList extends React.Component {
  onClick = rowId => {
    this.props.updateSelectedRows(rowId);
  }

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {
            usersList.map((user, i) => <Row key={i} rowId={i} user={user} onClick={this.onClick}/>)
          }
        </tbody>
      </table>
    );
  }
}

class MyList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pendingList: [],
      currentSelectedRows: []
    }
  } updateSelectedRows(selectedRows) {
    console.log("updateCalled");
    this.setState({
      currentSelectedRows: selectedRows
    });
  };

  approveSelected() {
    console.log("approve selected");
    console.log(this.state.currentSelectedRows);
  };
  render() {
    return (
      <div className="container">
        <div className="row_align_right">
          <button onClick={this.approveSelected.bind(this)}>Click</button>
        </div>
        <div className="content">
          <div className="">
            <TableList
              selectedRows={this.state.currentSelectedRows}
              updateSelectedRows={this.updateSelectedRows.bind(this)}
            />
          </div>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<MyList />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

凸起按钮onClick触发不同的功能

1 个答案: