Reactコンポーネントを使用してオブジェクトを編集し、その変更をレンダリングしますか？

Question

JS/Reactでどのようにデータを操作し、その言語にもっと慣れ親しんでいるかを知るための簡単なRPGを作成しようとしています。現在、私は単純なフォームを入力し、オブジェクトを変更しています。オブジェクトの名前はpersonで、私は彼の名前を変更しようとしています。ここで

var person = { 
    name: '' 
} 

は、オブジェクトの変更を処理するコンポーネントです：

class ChangePersonProp extends React.Component { 
    constructor() { 
     super(); 
     this.state = {value: ''}; 
     this.handleSubmit = this.handleSubmit.bind(this); 
     this.handleChange = this.handleChange.bind(this); 
    } 

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

    handleSubmit() { 
     if (this.props.buttonTitle == 'Name') { 
      person.name = this.state.value; 
     } 
    } 

    render() { 
     return(
      <form onSubmit={this.handleSubmit}> 
       <label> 
        {this.props.buttonTitle + ': '} 
        <input type="text" value={this.state.value} onChange={this.handleChange} /> 
       </label> 
       <input type="submit" value="Submit"/> 
      </form> 
     ); 
    } 
} 

しかし、私は、ユーザーにこれらの変更を表示するように見えることはできません。私はそれがRootフォームの変更でコンポーネントを再レンダリングし、オブジェクトを適切に更新しないことが原因であると思われます。コンソールが変更をrenderに記録しないので、これは当てはまります。私はpersonオブジェクトへの変更を示すために、私のRootコンポーネントを構築するに行くかどう

class Root extends React.Component { 
    render() { 
     console.log(person.name) 
     if (player.name == '') { 
      return(
       <div> 
        <ChangePlayerProp buttonTitle="Name" /> 
       </div> 
      ); 
     }else { 
      return(
       <div> 
        <p>{person.name}</p> 
       </div> 
      ); 
     } 
    } 
} 

？上記

Answer 1

Live Demo

以下、実施例であるが、あなたの場合には、これは本当に正しいアプローチではありません、それは構造化されます方法です。以下のコードはちょうど関連する部分を持っています。基本的には、コンポーネントをChangePersonPropコンポーネントの小道具として渡します。次に、サブミット時にその関数を呼び出します。サブミットすると、Rootコンポーネント状態のデータが更新され、再レンダリングが可能になります。しかし、私が言ったように、これは正しいアプローチだとは本当に考えていませんが、これは非常に面倒な速さになる短期的な修正です。あなたが取るしたいと思う実際のアプローチは

• fluxを使用することです

  class ChangePersonProp extends React.Component { 
      constructor(props) { 
       super(props); 
       this.state = {value: ''}; 
      } 
      handleSubmit() { 
       if (this.props.buttonTitle == 'Name') { 
        this.props.onSubmit(this.state.value); 
       } 
      } 
  } 
  
  class Root extends React.Component { 
      constructor(props) { 
       super(props); 
       this.state = { 
        name: '' 
       } 
       this.handleSubmit = this.handleSubmit.bind(this); 
      } 
      render() { 
       if (!this.state.name) { 
        return(
         // things 
        ); 
       } 
  
       return(
       // other things instead 
      ); 
      } 
      handleSubmit(value) { 
       this.setState({name : value}); 
      } 
  } 
  
  
  ReactDOM.render(
      <Root/>, 
      document.getElementById('container') 
  ); 
  

  提案されたアプローチ

  にあまりにも多くの注意を払うはずの

  コード（ありますrefluxなどの多くの実装）

• redux（これは技術的なものではなく、私がそれを含む理由です）
• またはmobx現在私の個人的なお気に入りです。

データについて知り、データの変化に反応するために、関連していないコンポーネントが必要なため、基本的にコンポーネント階層外に何かが必要です。これはフラックスやその他の実装の正確な使用例です。

ここでは、どのように見えるかについての擬似コードを示します。

datastore { 
    person = {all the properties} 
} 
dataStoreActions { 
    changeName(name) { 
     person.name = name; 
    } 
} 

PersonInputComponent { 
    // listens to store if it needs to react to any changes from it. 

    // onSubmit calls the changeName action 
} 

RootComponent { 
    // listens to store 
    // Store has changed, so do something with the data. 
} 

各実装は、店舗に耳を傾け、またはそれは本当にあなたが何を選ぶか、ライブラリに依存してアクションを呼び出すために独自のアプローチを持っていますが、全体的なアプローチは、それらすべての間に非常によく似ています。

私はいくつかのスマートな人がこのタグを見ているので、ある時点でいくつかの答えが得られるかもしれないことを知っていますが、うまくいけば、これで十分です。