Question

我有一个带有react-rails gem的Rails应用程序。

这是我的控制者：

class WebsitesController < ApplicationController
  def index
    @websites = Website.all
  end
end

这是我的观点：

<%= react_component('WebsiteList', websites: @websites) %>

这是我的React组件：

class WebsiteList extends React.Component {

  render () {
    return (
      <div className="container">
        <AddWebsite/>
        <WebsiteItem websites={this.props.websites}/>
      </div>
    );
  }
}

WebsiteList.propTypes = {
  websites: React.PropTypes.node
};

在WebsiteItem中，它只是映射数组并显示每个对象。

使用ajax添加Web站点组件以获取服务器上的数据：

class AddWebsite extends React.Component {
  constructor() {
    super();
    this.state = {
      formValue: "http://www."
    }
  }

  handleChange(e) {
    this.setState({formValue: e.target.value});
  }

  submitForm() {
    $.ajax({
      method: "POST",
      url: "/websites",
      data: { website: {name: "New Web", url: this.state.formValue} }
    })
      .done(function() {
        console.log("done")
      });
  }

  render() {
    return (
      <form>
        <input value={this.state.formValue} onChange={this.handleChange.bind(this)} name="url"/>
        <button type="button" onClick={this.submitForm.bind(this)} className="btn">Add Web</button>
      </form>
    );
  }
}

当有人添加（或删除）链接并且ajax成功时，我也想更新React组件。而不是this.props.websites＆amp; propTypes - 我怎么能为州做？我是否需要从ajax获取它，或者我可以在erb中使用<%=react_component ... %>吗？

解决这个问题的最佳方法是什么？基本上创建单页应用程序？

Answer 1

好的，所以你真正想要的是在>>> def h(x): ... r = int(x, 16) % 2**14 ... return r if r < 2**13 else r - 2**14 ... >>> h('1FFE') 8190 >>> h('E002') -8190组件中进行回调，该组件来自你持有app状态的AddWebsite。请注意，Dashboard是组件绑定的，这意味着您无法访问其他组件的状态。您可以将一个组件的状态作为属性传递给另一个组件，这就是我们将要使用的。

this.state

请注意，这只是众多可能的解决方案之一。

如何在React - Rails中添加或删除对象？

1 个答案: