ReactJs: как обрабатывать объекты состояния со свойствами
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Ответы (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 Реагируйте на js и bootstrap модально из примеров на github
- reactjs реагировать - ссылка на тег
- reactjs this.setState не объединяет состояния, как я ожидал
- reactjs Rerender вид в браузере изменить размер с React
- reactjs Рендеринг компонента React в поповере Bootstrap
- reactjs Как получить доступ к пользовательским атрибутам из объекта события в React?
- reactjs Как мне симулировать события браузера при написании тестов для React js?
- reactjs React.js: избегайте обновлений редактируемого в данный момент ввода
- reactjs ReactJS: моделирование двунаправленной бесконечной прокрутки
- reactjs Reactjs: Неожиданный токен '<' Ошибка
- reactjs Facebook React.js: как вы отображаете компоненты с состоянием на сервере?
- reactjs React.js: Идентификация различных входов с помощью одного обработчикаChange
- reactjs Реактивен ли response.js с компонентами jQuery / UI
- reactjs Почему концепция React Virtual DOM считается более производительной, чем грязная проверка моделей?
- reactjs Бесконечная прокрутка с помощью React JS
- reactjs setInterval обратный вызов с контекстом
- reactjs Простая форма отправки с файлами
- reactjs Reactjs - правильная установка встроенных стилей
- reactjs Доступ к реквизитам внутри кавычек в React JSX
- reactjs React JSX: выбор «selected» для выбранного варианта <select>