Question

我有一个带有onClick事件的按钮，该事件将值发送到我的状态，并且应该在第二次单击时将其从状态中删除：

<button 
type="button" 
value={posts.index} 
onClick={this.props.data ? this.props.remove : this.props.add}
key={cont._id}
data={-1}
>

我的问题是我不知道如何在第一次点击后将数据属性设置为1，因此第二次点击会触发删除功能。我如何实现这一目标？

动作创作者

    export function add(e) {
      return{
        type: ADD,
        payload: e.target.value
      }

}

Answer 1

在返回前设置值。

render() {
   const buttonAction = this.props.data ? this.props.remove : this.props.add
   return ( 
     <button 
      type="button" 
      value={posts.index} 
      onClick={buttonAction}
      key={cont._id}
      data={this.props.data}> 
    )
}

Answer 2

我假设道具中的data属性包含您希望data属性包含的值。

首先，确保在父组件中data被定义为state属性，以便可以对其进行操作以影响父级和按钮。

接下来，将add()和remove()函数定义为：

add() {
  this.setState({data: this.state.data + 1});
}

remove() {
  this.setState({data: this.state.data - 1});
}

当然，构造函数绑定到this范围（仍在父级）

constructor(props, context) {
  this.add = this.add.bind(this)
  this.remove = this.remove.bind(this)
}

完成这些操作后，您可以将按钮定义为：

<button 
  type="button" 
  value={posts.index} 
  onClick={this.props.data ? this.props.remove : this.props.add}
  key={cont._id}
  data={this.props.data} >

反应最强烈的信念是DOM的变化是由数据触发的。使用此设置，只要通过调用add()或remove()回调对父数据属性进行任何更改，就会重新呈现该按钮以反映数据的新值。

如何在onClick事件后在prop上设置属性？

2 个答案: