React-Railsからオブジェクトを追加または削除するには？

Question

私はreact-rails gemのRailsアプリを持っています。

これは私のコントローラである：

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

は、これが私の見解です：

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

これは私のコンポーネントウィットリアクトされています。それだけで、配列をマッピングしていますWebsiteItemで

class WebsiteList extends React.Component { 

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

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

をし、各オブジェクトを表示します。私もコンポーネントに反応更新したいと思い、リンクおよびAjaxは成功である

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> 
    ); 
    } 
} 

誰かが追加（または削除）：アヤックスとの

AddWebsiteコンポーネントは、サーバー上のデータを取得します。 this.props.websites & propTypeの代わりに、私は州のためにそれをどうやって行うことができますか？私はそれをajaxから取得する必要がありますか、またはerbで<%=react_component ... %>を使用できますか？

これを解決し、基本的に1ページのアプリケーションを作成する最も良い方法は何ですか？

Answer 1

あなたが本当に望むのは、AddWebsiteコンポーネントのコールバックを、Dashboardから渡してアプリ状態を保持することです。 this.stateはコンポーネントバインドされているため、別のコンポーネントの状態にアクセスすることはできません。あるコンポーネントの状態をプロパティとして別のコンポーネントに渡すこともできますが、これが使用するものです。

// dashboard.es6.jsx 
class Dashboard extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     websites: this.props.websites 
    } 

    // Don't forget to bind to self 
    this.handleWebsiteAdd = this.handleWebsiteAdd.bind(this) 
    } 

    handleWebsiteAdd(newWebsite) { 
    const websites = this.state.websites.concat([newWebsite]); 

    this.setState({websites});  
    } 

    render() { 
    return (
     <div className="container"> 
     <AddWebsite onAdd={this.handleWebsiteAdd}/> 
     <WebsiteList websites={this.state.websites}/> 
     </div> 
    ); 
    } 
} 

// add_website.es6.jsx 
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(data) { 
     // NOTE: Make sure that your API endpoint returns new website object 
     // Also if your response is structured differently you may need to extract it 
     // and instead of passing data directly, pass one of its properties. 
     this.props.onAdd(data) 
     Materialize.toast('We added your website', 4000) 
     }.bind(this)) 
     .fail(function() { 
     Materialize.toast('Not a responsive URL', 4000) 
     }); 
    } 

    render() { 
    return (
     <div className="card"> 
     <div className="input-field" id="url-form"> 
      <h5>Add new website</h5> 
      <form> 
      <input id="url-input" value={this.state.formValue} onChange={this.handleChange.bind(this)} type="text" name="url"/> 
      <button type="button" onClick={this.submitForm.bind(this)} className="btn">Add Web</button> 
      </form> 
     </div> 
     </div> 
    ); 
    } 
} 

AddWebsite.propTypes = { 
    onAdd: React.PropTypes.func.isRequired 
}; 

これは多くの可能な解決策の1つにすぎないことにご注意ください。