Question

我有这样的表格列，它的值来自我的reducer。同一列有递增/递减按钮。因此，当使用点击按钮时，我必须从<td>获取值并触发我的操作。我正在搜索here，但其搜索的是包含事件onChange的输入文本。请有人让我知道怎么做？

以下是我的<td>列：

<td>
    {this.props.prog}%
    <button type="button" className="btn btn-danger">
        <span className="glyphicon glyphicon-arrow-up" />
    </button>
    <button type="button" className="btn btn-danger">
        <span className="glyphicon glyphicon-arrow-down" />
    </button>
</td>

编辑1：

我已经尝试了一些基本上我的onClick正确触发但我无法传递值

<td>
                        <button type="button" className="btn btn-danger" onClick={this.props.resetGrowth}>Reset</button>
                        {this.props.prog}%
                        <button type="button" className="btn btn-danger" onClick = {(event) => this.props.updated(this.props.prog) }>
                        <span className="glyphicon glyphicon-arrow-up"/>
                        </button>
                        <button type="button" className="btn btn-danger">
                        <span className="glyphicon glyphicon-arrow-down"/>
                        </button>
                    </td>

它将传递给它这个组件

<Table updated={value => this.props.udated(value)}/>

这是我的容器，它会触发值

 <VolumeComponent 
              udated = {(value) => updated(value)}/>

const mapDispatchToProps= (dispatch) => (
 bindActionCreators({updated},dispatch)
)

Answer 1

由于您使用的是减速机，我猜您正在使用redux。如果{this.props.prog}是您的值，则可以在传递给增加/减少按钮的OnClick函数中使用它。例如：

handleDecrease(){
    const newValue = this.props.prog + 1;
    this.props.updateValue(newValue)
}

handleIncrease(){
    const newValue = this.props.prog - 1;
    this.props.updateValue(newValue)
}

render(){
    return (
        ...
        <button onClick={this.handleIncrease}/>
    );
}

如何获得反应中的列值

1 个答案: