Question

我正在尝试编写一个简单的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组件重新呈现表单的更改，而不是正确更新对象。我认为这是真的，因为控制台不会在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

以上是一个工作示例，下面是它的结构，但在您的情况下，这不是真正的正确方法。下面的代码只是有相关的部分。基本上我将一个函数作为prop传递给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目前是我个人的最爱。

您基本上需要组件层次结构之外的东西，因为您需要非相关组件来了解数据并对数据中的更改做出反应。这是助焊剂或其他实现的确切用例。

这是一些关于它看起来如何的伪代码。

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

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

我知道一些聪明的人会看到这个标签，所以在某些时候可能会有更多充实的答案，但希望这足以让你前进。

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

1 个答案: