Question

在react中，我在表格中创建了几行，其中一些行具有如下字形图标：

var StockRow = React.createClass({
    unwatch: function() {
        this.props.unwatchStockHandler(this.props.stock.symbol);
    },
...
 return (                                     
        <tr>
            <td><button type="button" className="btn btn-default btn-sm" onClick={this.unwatch}>
                <span className={currentGlyph} aria-hidden="true"></span> </button></td>
    ...

这很好用。稍后，当用户在给定的表行中单击浏览器上的按钮时，调用函数this.unwatch也可以正常工作。 在点击的按钮上，如何将按钮的字形更改为someOtherGlyph并立即反映在浏览器上？

var HomePage = React.createClass({
    getInitialState: function() {  
    ....
    },
    unwatchStock: function(symbol) {
        //how do I change the glyph of the button that was clicked?
    },
    ....

我习惯让回调函数中的发件人包含在这样调用的函数中（虽然发件人是网页，表格，行，按钮???）：

unwatchStock: function(sender, symbol) {

然后这样的事情可能会起作用（假设发件人是按钮）：

sender.buttonIcon = someOtherGlyph

如果有帮助，该按钮位于该行的第一列。也许我需要从Button继承一个新组件，但不知道该怎么做：

class Button extends React.Component {
  render() {
    // What goes in here?
    };
  }
}

Answer 1

发布编辑：）

class HomePage extends React.Component {
   constructor(props) {
    super(props);
  }
  render() {
    var rows = [];
    for(var i in data){
      rows.push(
        <tr>
          <td><Button/></td>
        </tr>
      );
    }
    return (
      <table>
        <tbody>
          {rows}
        </tbody>
      </table>
    )
  }
}

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentGlyph: 'glyph-val-init' };

    this.unwatch = this.unwatch.bind(this);
  }
  unwatch(){
    this.setState({
      currentGlyph: 'new-value'
    })
  }
  render() {
    <div>
      <button className={this.state.currentGlyph} onClick={this.unwatch}></button>
    </div>
  }
}

虽然此代码没有更改字形，但它确实显示更改了文本值，可以轻松地重新调整用于更改类名

基本上你想做的是

this.state = {glyph: 'value'}

然后设置状态以更改字形值

this.setState({glyph: 'new value'})

原谅非jsx格式，但编辑器不允许这样做

＆＃13;

class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentGlyph: 'glyph val init' };
    
    this.unwatch = this.unwatch.bind(this);
  }
  unwatch(e){
    var target = e.target;
    this.setState({
      currentGlyph: 'new glyph'
    });
  }
  render() {
    return React.createElement('button', { onClick: this.unwatch }, this.state.currentGlyph);
  }
}

ReactDOM.render(React.createElement(HomePage), document.getElementById('rroot'));

＆＃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='rroot'>root</div>

＆＃13;

Answer 2

这是一个JSBin，用于演示如何执行此操作。

http://jsbin.com/fagegelele/1/edit?js,output

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };
    this.toggleChecked = this.toggleChecked.bind(this);
  }

  toggleChecked() {
    this.setState({
      checked: !this.state.checked
    });
  }

  render() {
    const checked = this.state.checked ? 'CHECKED' : 'UNCHECKED';
    return (
      <div
        className={checked}
        onClick={this.toggleChecked}
      >
        Checked? {checked}
      </div>
    );
  }
}

您将字形图标的标志保留在状态中，并在单击按钮时更改该标志。在JSBin的示例中，单击“已检查？”的文本。看它工作。这将是您希望在每个表格单元格中放置字形图标的示例。

编辑：这是一个jsbin，它将表数据与特定表格单元格所需的glyphicon配对：http://jsbin.com/vopiroz/4/edit?js,console,output

更改回调

2 个答案: