Question

故事：

用户点击“添加”，它会将数据库中的值设置为true。点击“删除”，将同一列更新为数据库中的false：

def add
  u = User.find(1)
  u.foo = true
  u.save
  u.reload
  head :ok
end

def remove
  u = User.find(1)
  u.foo = false
  u.save
  u.reload
  head :ok
end

反应按钮组件：

...

_add(){
  $.ajax({
    url: ''url-to-the-controller-action-(add),
    type: 'POST',
    success: function (data) {
        console.log("DB is set to: " this.props.uid)
    },
    error: function (data) {
        console.log("not added")
    }
  });
},

_remove(){
  $.ajax({
    url: ''url-to-the-controller-action-(remove),
    type: 'POST',
    success: function (data) {
        console.log("DB is set to: " this.props.uid) 
    },
    error: function (data) {
        console.log("not removed")
    }
  });
},

render(){
  return(
    <div>
      <button onClick={this._add}>add</button>
      <button onClick={this._remove}>remove</button>
    </div>
  )
}

...

我的按钮从另一个组件接收道具：

Foo组件

getInitialState: function() {
  return{
    uid: this.props.data,

  }
}

Foo的渲染：

<Button uid={this.state.uid} />

我相信我可以在不需要助焊剂/还原剂的情况下实现这一目标，因为这对于这个微小的组件来说是过度杀灭。 I have looked into this但不确定如何使用它。

该应用有效，但我必须刷新页面以查看更改。

或者，Rails 5是我用动作电缆的最佳选择吗？

Answer 1

成功时，您需要通知 Foo 组件而不是 uid 。

在 Foo 组件中：

onChange: (uid) ->
   this.setState({uid: uid})

render: ->
  <Button uid={this.state.uid} onChange={this.onChange}/>

在按钮组件中：

_add(){
  $.ajax({
    url: ''url-to-the-controller-action-(add),
    type: 'POST',
    success: function (data) {
     this.props.onChange(data["uid"])
     console.log("DB is set to:", data["uid"])
    },
    error: function (data) {
       console.log("not added")
    }
  });
},

在你的行动中：

def add
  ...
  render json: { uid: u.foo }
end

关于你需要刷新的原因：

进行ajax调用时，数据会在数据库中更新。但是在成功回调时，您需要使用新数据更新视图。当您记录 this.props.uid 时，您将旧数据记录在内存中，当您点击刷新时，数据将被数据库中的新数据替换。

例如，在 jQuery 中，您需要使用成功回调中传递的新数据替换DOM中的元素。在 ReactJS 中，您需要更新状态以重新渲染组件。

此处，您的组件按钮是 Foo 的孩子，并且像道具一样接收 uid 。因此，您需要通知您的父组件，而 uid 已更改为更新状态，并重新呈现自己和他的孩子。

使用反应组件中的ajax获取实时更新数据

1 个答案: