Javascript 使用React组件编辑对象并呈现所述更改？

我正在尝试编写一个简单的RPG，以了解如何在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

组件以显示对

person

对象的更改

上面是一个工作示例，下面是它的结构，但是在您的情况下，这并不是正确的方法。下面的代码只包含相关的部分。基本上，我将一个函数作为道具传递给

ChangePersonProp

组件。然后在提交时调用该函数，该函数更新

Root

components状态中的数据，允许其重新提交。然而就像我说的，我真的不认为这是正确的方法，这是一个短期的解决方案，很快就会变得非常混乱

您不应该太注意的代码

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

每个实现都有自己的监听存储或调用操作的方法，因此这实际上取决于您选择的库，但总体方法在它们之间非常相似

---

我知道有些聪明的人会看这个标签，所以在某个时候可能会有一些更具体的答案，但希望这足以让你走

为什么mobx是你的最爱？

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

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