Question

141 просмотра

1 ответ

Я играю с ReactJ, и мне было интересно, возможно ли работать с объектами состояния, которые имеют свойства. Теперь я сделал пример псевдокода, который имеет простой объект, но я бы хотел обработать случаи, когда у меня есть много объектов со своими собственными свойствами.

Например, я хотел бы рассмотреть такие случаи, как:

//Initialize object
getInitialState: function() {
    return {
        myObject: {
            prop1: "",
            prop2: ""
        }
    };
}

//How I would assign to a property of that object
setProp1: function(event) {
    this.setState({myObject.prop1: event.target.value});
},

//Rendering the item (jsx)
<div>
    <div className="custom">{myObject.prop1}</div>
    <span>{myObject.prop2}<span>
</div>

Возможно ли что-то похожее на приведенный выше пример? Или мне нужно привязать каждое свойство к государству напрямую? Как лучше всего справиться со сценарием, подобным этому, в Reactjs?

Автор: scripton Источник Размещён: 12.11.2019 09:52

Answer 1

2 плюса

Решение

Лучше всего создать новый объект с измененным указанным свойством. Вы можете сделать это с помощью чего-то вроде Object.assign(с помощью шимов или библиотек при необходимости):

var newMyObj = Object.assign({}, this.state.myObject, {
  prop1: event.target.value
});
this.setState({myObject: newMyObj});

Вы также можете использовать помощники React для неизменности, чтобы помочь с обновлением вложенных структур:

var newMyObj = update(this.state.myObject, { prop1: { $set: event.target.value } });
this.setState({myObject: newMyObj});

Если вы используете Babel, JSX или что-то, что поддерживает ES7-операции по отдыху / распространению , вы можете немного упростить код (это мой любимый вариант, когда он доступен, потому что я думаю, что он читается лучше):

var newMyObj = {
  ...this.state.myObject,
  prop1: event.target.value
};
this.setState({myObject: newMyObj});

Вы часто будете видеть примеры, которые просто обновляют существующий объект и сбрасывают состояние, но это не рекомендуется:

// antipattern!
this.state.myObject.prop1 = event.target.value;
this.setState({myObject: this.state.myObject});

Автор: Michelle Tilley Размещён: 11.10.2015 07:20

ReactJs: как обрабатывать объекты состояния со свойствами

Ответы (1)

Вопросы из категории :