#javascript #reactjs #ecmascript-6 #jsx
Вопрос:
Я хочу передать дескриптор щелчка (handleDeleteUser) другому компоненту, из user.js чтобы DropDownUserTool.js на самом деле:
User.js
handleDeleteUser = (id) => {
alert(id);
};
...
// in render
User.data.map(function (User, i) {
return (
<DropDownUserTool
id={User.id}
click={(e) => {
this.handleDeleteUser(e);
}}
/>
);
});
DropDownUserTool.js
const DropDownUserTool = (props) => {
return (
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle color="secondary" caret>
tools
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
<Link to={"/User/Edit/" props.id}>Edit</Link>
</DropdownItem>
<DropdownItem onClick={() => props.click(props.id)}>
Delete
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
);
};
Но после щелчка он возвращает ошибку:
Ошибка типа: Не удается прочитать свойства неопределенного (чтение ‘handleDeleteUser’)
На этой линии:
<Идентификатор DropDownUserTool={User.id} нажмите={(e) => {this.handleDeleteUser(e)}}/<Идентификатор выпадающего списка пользователей={User.id} нажмите={(e) =>>
Комментарии:
1. Вы пробовали просто пройти
this.handleDeleteUser
мимо ?2. @testing_22 да, есть ошибка
Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'handleDeleteUser')
3. Итак, компонент, в котором определен handleDeleteUser, является компонентом класса, я полагаю, поскольку вы ссылаетесь
this
?4. @FranCarstens да правильно
Ответ №1:
Вы пытаетесь проникнуть this
внутрь map
, просто определите this
! внутри render
перед петлей:
let realthis = this;
Затем позвоните своему обработчику вот так:
<DropDownUserTool id={User.id} click={(e) => {realthis.handleDeleteUser(e)}}/>
Ответ №2:
Когда вы делаете свою карту, вы используете стандартный вызов функции и теряете контекст. Вместо этого используйте функцию со стрелкой.
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [{ id: 1 }, { id: 2 }, { id: 3 }]
};
}
handleDeleteUser = (id) => alert(id);
render() {
return (
<div>
// this needs to be an arrow function
// that way you won't change the context of `this`
{this.state.data.map((item, i) => {
return (
<DropDownUserTool
id={item.id}
key={item.id}
handleDelete={this.handleDeleteUser }
/>
);
})}
</div>
);
}
}
const DropDownUserTool = ({ handleDelete, id }) => (
<button onClick={() => handleDelete(id)}>Delete</button>
);
Комментарии:
1. Ошибка:
TypeError: Cannot read properties of undefined (reading 'handleDeleteUser')
2. Застреленный здесь в темноте, ты восстанавливаешь «User.id» в компоненте «Пользователь». Где определяется «идентификатор»? Если он включен пользователем, он должен быть this.id. Если только я чего — то не упускаю.
3. он берет все данные, такие
id
и т. Д., ИзUser
объектаUser.data.map(function(User, i){
с тех порUser
, как получил данныеapi
. Кроме того, яid
успешно включилсяDropDownUserTool.js
, он работает над ссылкой редактирования.4. Ты прав, не знаю, как я это пропустил. Рад, что у тебя получилось.
5. Сделал обновление.