Блог

Я хочу передать дескриптор щелчка (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) =>>

Вы пытаетесь проникнуть this внутрь map , просто определите this ! внутри render перед петлей:

 let realthis = this;
 

Затем позвоните своему обработчику вот так:

 <DropDownUserTool id={User.id} click={(e) => {realthis.handleDeleteUser(e)}}/>
 

Когда вы делаете свою карту, вы используете стандартный вызов функции и теряете контекст. Вместо этого используйте функцию со стрелкой.

 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>
);