使用 react_rails 时更改 react_component 中的道具

Question

我正在使用这个助手来显示一个 datepicker 组件

      <%= react_component "MyDatePicker", startDate: '', endDate: ''%>

我想将 javascript 值传递给 startDate 和 endDate 属性。有什么可行的方法吗？

Answer 1

我真的不知道你到底想做什么，但如果你只是想从组件获取道具的值到你的 rails 控制器，请执行以下操作。您可以在反应组件中设置道具的状态，并在用户选择日期时发送 ajax 请求。

Answer 2

使用 Pubsub 解决了这个问题。我所做的是 publish 用户首先在 javascript 中选择值。然后在 React 父组件生命周期方法上订阅了先前的 published 事件，并使用 setState 更改基于此的 state。

现在在移动设备上，但为了清楚起见，一旦我可以访问电脑，我会发布代码。

更新

使用pubsub很简单。首先我们需要 publish 从任何地方使用 javascript

dates={some_value:value, another_value: value }
PubSub.publish(OFFLINE_BOOKING_DURATION, dates)

这里我只是传递了一个日期对象。你可以传递任何东西。然后在 React 的 componentDidMount 状态下我订阅了这个

componentDidMount: function () {
    this.token = PubSub.subscribe(OFFLINE_BOOKING_DURATION, this.subscriber)
},

这里第一个是我们期待的对象和回调

所以这是回调函数，你可以在这里做任何事情，比如ajax调用、设置状态或任何事情

subscriber: function (msg, data) {
 #this method gets called on receiving data
 #we can access the data we passed like this
data.some_value},

最后在组件 unmounts

时退订

componentWillUnmount: function () {
        PubSub.unsubscribe(this.token)
    }

我就是这样实现的。我已经没有代码了，但我希望你明白了。

changing props in react_component when using react_rails