#javascript #reactjs
Вопрос:
Я новичок в реагировании, и мне интересно, можно ли обновить содержимое другого компонента на основе событий из другого компонента.
У меня есть два компонента реакции. Один из компонентов загружает свои данные в него при загрузке страницы, а другой компонент должен отображать свои данные на основе метода первых компонентов onClick .
Один из компонентов получает свои данные, загруженные в него из API, которые я затем показываю в списке. Затем у меня есть метод , который должен обрабатывать itemClicked вызываемые элементы, вызываемые при нажатии на элемент, данные в другом компоненте должны обновляться.
itemClicked = () =gt; { // Get the ID of the clicked item, and use it in the other component console.log(e.target.attributes[0].value); } // ... lt;ulgt; {items.map(item =gt; ( lt;li onClick={this.itemClicked} key={item._id} itemID={item._id}gt; {item.name} lt;/ligt; ))} lt;/ulgt; Я сейчас, возможно, задаю плохой вопрос, но я новичок в реагировании и пытаюсь узнать немного больше о состояниях и реквизите.
Редактировать.
Это родительский компонент, в который я загружаю два компонента:
class Dashboard extends React.Component { constructor(props) { super(props); this.state = { currentItem: {} } } onItemClick(item) { this.setState({ currentItem: item }) } render() { return lt;gt; lt;div className='dashboard'gt; lt;div className='dashboard__wrapper'gt; lt;SelectItem onItemClick="{this.onItemClick}" /gt; lt;EditItem item="{this.state.currentItem}" /gt; lt;/divgt; lt;/divgt; lt;/gt; } } export default Dashboard Я также обновил компонент SelectItem:
itemClicked = (e) =gt; { console.log(e.target.attributes[0].value); if (this.props.onItemClick) { this.props.onItemClick(e.target.attributes[0].value) } } Но теперь он жалуется, что эта строка:
this.props.onItemClick(e.target.attributes[0].value) Это не функция:
Uncaught TypeError: this.props.onItemClick is not a function Комментарии:
1. Вы должны хранить данные, которыми вам нужно поделиться, используя глобальное состояние и контекстный API.
2. Это немного шире, но, по сути, вы хотите обновить состояние в своем обработчике щелчков. Это состояние может находиться в общем родительском компоненте, контексте, менеджере состояний, таком как Redux, однако вы хотите разделить состояние между компонентами. Но событие обновляет состояние , и пользовательский интерфейс выводится из состояния. Акт обновления состояния запускает пользовательский интерфейс для повторного отображения в React, это в основном его основная функциональность.
Ответ №1:
Конечно, можешь.
Если компонент списка и компонент представления находятся в одном родительском компоненте. Родительский компонент может иметь свойство состояния, например. currentItem Значение currentItem будет задано путем передачи обратного вызова как свойства компоненту списка. Обратный вызов должен быть вызван при нажатии на элемент списка.
//List Component itemClicked = () =gt; { // Get the ID of the clicked item, and use it in the other component console.log(e.target.attributes[0].value); //call the callback if(this.props.onItemClick){ this.props.onItemClick(e.target.attributes[0].value) } } ... lt;ulgt; {items.map(item =gt; ( lt;li onClick={this.itemClicked} key={item._id} itemID={item._id}gt; {item.name} lt;/ligt; enter code here ))} lt;/ulgt; Компонент страницы
this.state = { currentItem: {} } onItemClick(item){ this.setState({ currentItem: item }) } render(){ return lt;gt; lt;ListComponent onItemClick={this.onItemClick} /gt; lt;ViewComponent item={this.state.currentItem} /gt; lt;/gt; } Комментарии:
1. Спасибо за ответ, я обновил вопрос с ошибкой, которую я сейчас получаю.
2. Это должно быть
onItemClick={this.onItemClick}удаление кавычек
Ответ №2:
Вы можете создавать с помощью компонента функции и компонента класса. Дайте мне знать, что вы используете в качестве дочернего компонента. Я знаю, что вы используете родительский компонент в качестве компонента класса.(из вашего кода) . Пожалуйста, подтвердите это.
Если это функциональная составляющая.
const childComponent=({valuYoupassed})=gt;{ return ( lt;gt; //Your child component code here lt;/gt; ); В родительском компоненте добавьте дочерний компонент в качестве
lt;childComponent valuYoupassed={this.valuYoupassed} /gt;