Использование компонентов React для редактирования объектов и рендеринга этих изменений?

Question

Я пытаюсь написать простую РПГ, чтобы узнать больше о том, как данные можно манипулировать в JS/React и ознакомиться с языком. В настоящее время у меня есть простая форма ввода ввода и изменение объекта. Объект называется 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.

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

Как бы я идти о структуризации моего Root компонента, чтобы показать изменения в person объекта?

Answer 1

Live Demo

Выше рабочий пример, ниже, как это структурировано, однако в вашем случае это не совсем правильный подход. В приведенном ниже коде есть только соответствующие штуки. В основном я передаю функцию вниз в качестве опоры для компонента ChangePersonProp. Затем он вызывает эту функцию при отправке, которая обновляет данные в состоянии компонентов Root, позволяя ему перезапускать. Однако, как я уже сказал, на самом деле я не думаю, что это правильный подход, это кратковременное исправление, которое быстро станет очень беспорядочным.

код вы не должны платить слишком много внимания

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

Предлагаемый подход

Реальный подход вы хотели бы принять это использовать

• flux (есть многие реализации, такие как reflux)
• redux (который не является технологическим потоком и почему я его включаю)
• или mobx, который в настоящее время является моим личным фаворитом.

Вы в основном нуждаетесь в чем-то вне иерархии компонентов, потому что вам нужны не связанные компоненты, чтобы знать данные и реагировать на изменения данных. Это точный прецедент для потоков или других реализаций.

Вот несколько psuedocode о том, как это может выглядеть.

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. 
} 

Каждая реализация имеет свой собственный подход для прослушивания магазинов, или позвонив по телефону действия так что это действительно зависит от того, какую библиотеку вы выбираете, но общий подход очень похож между ними все.

Я знаю, что некоторые умные люди смотрят этот тег, поэтому в какой-то момент могут появиться какие-то более согласованные ответы, но, надеюсь, этого достаточно, чтобы вы начали.