Реагирует на выполнение делегата, переданного ребенку через реквизит

Question

У меня есть компонент реагирования, который вставляется в страницу при нажатии кнопки.Этот компонент имеет кнопку, которая при нажатии должна выполнять onUpdateClient.это не выполняется, и я понятия не имею, почему ... Я в полном недоумении ... Более того, я передаю делегат props этому компоненту и хочу выполнить делегат из вышеуказанного метода... Я надеюсь, что как только обработчик событий заработает, это тоже сработает ... Может ли кто-нибудь вызвать какие-либо ошибки, которые, по их мнению, могут препятствовать срабатыванию этого обработчика событий?

class UserProfile extends Component {
  constructor(props){
    super(props);
    this.state={
      updateDisabled : false
    };
    this.onUpdateClient = this.onUpdateClient.bind(this);
  }

    onUpdateClient(){
    // tried to execute this way... but this method isn't even getting called... i dont understand :*(
    //const {updateClientCallback} = this.props;
    alert("in " + this.props.client.name);
    this.setState({updateDisabled: true});
    //updateClientCallback();
  }
  
  render() {
const {classes, client, updateClientCallback} = this.props;

return (
    <div>
      <GridContainer>
        <GridItem xs={12} sm={12} md={16}>
          <Card>
            <CardHeader color="rose" icon>
              <CardIcon color="rose">
                <PermIdentity/>
              </CardIcon>
              <h4 className={classes.cardIconTitle}>
                Edit Profile - <small>{client.name} : {client.id}</small>
              </h4>
            </CardHeader>
            <CardBody>
              //{...}
              <Button disabled={this.state.updateDisabled} onclick={this.onUpdateClient.bind(this)} color={updateClientCallback == null? "error" : "warning"}
                      className={classes.updateProfileButton}>
                Update Profile
              </Button>
              <Clearfix/>
            </CardBody>
          </Card>
        </GridItem>
      </GridContainer>
    </div>
);
  }

это компонент, который создает вышеуказанный компонент

class Clients extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: dataTable.dataRows.map((prop, key) => {
                return {
                    id: key,
                    name: prop[0],
                    position: prop[1],
                    office: prop[2],
                    age: prop[3],
                    actions: (
                        // we've added some custom button actions
                        <div className="actions-right">
                            <Button
                                justIcon
                                round
                                simple
                                color="primary"
                                className="edit"
                            >
                                <Person/>
                            </Button>{" "}
                            {/* use this button to add a edit kind of action */}
                            <Button
                                justIcon
                                round
                                simple
                                onClick={this.editClient.bind(this,key)}
                                color="success"
                                className="edit"
                            >
                                <Dvr/>
                            </Button>{" "}
                        </div>
                    )
                };
            }),
            alert: null,
            show: false,
            client: null,
        };
        this.editClient = this.editClient.bind(this);
        this.viewClient = this.viewClient.bind(this);
    }

    removeClient() {
        alert(this.state.client.name);
        this.setState({client : null})
    }

    editClient(key) {
        let client = this.state.data.find(o => o.id === key);
        this.setState({
            client: (
                <UserProfile {... this.props} updateClientCallback={this.removeClient.bind(this)} client={client}/>
            )
        });
    }

    viewClient() {

    }

    inputConfirmAlert(e) {
        this.setState({client: e});
    }

    hideAlert() {
        this.setState({
            alert: null
        });
    }

    render() {
        const {classes} = this.props;
        return (
            <div>

                {this.state.client}
                <GridContainer>
                    <GridItem xs={12}>
                        <Card>
                            <CardHeader color="primary" icon>
                                <CardIcon color="primary">
                                    <People/>
                                </CardIcon>
                                <h4 className={classes.cardIconTitle}></h4>
                            </CardHeader>
                            <CardBody>
                                <ReactTable
                                    data={this.state.data}
                                    filterable
                                    columns={[
                                        {
                                            Header: "Name",
                                            accessor: "name"
                                        },
                                        {
                                            Header: "Position",
                                            accessor: "position"
                                        },
                                        {
                                            Header: "Office",
                                            accessor: "office"
                                        },
                                        {
                                            Header: "Age",
                                            accessor: "age"
                                        },
                                        {
                                            Header: "Actions",
                                            accessor: "actions",
                                            sortable: false,
                                            filterable: false
                                        }
                                    ]}
                                    defaultPageSize={10}
                                    showPaginationTop
                                    showPaginationBottom={false}
                                    className="-striped -highlight"
                                />
                            </CardBody>
                        </Card>
                    </GridItem>
                </GridContainer>
            </div>
        );
    }
}

Answer 1

Полагаю, виновник лежит здесь:

onclick={this.onUpdateClient.bind(this)}

Есть некоторые проблемы с этим битом:

• Предполагается, что onClick вместо onclick.
• Вы связываете onUpdateClient дважды, внутри конструктора и внутри обработчика событий.

Поэтому я предлагаю 2 возможных исправления:

class UserProfile extends Component {
  constructor(props){
    super(props);
    this.onUpdateClient = this.onUpdateClient.bind(this);
  }

  onUpdateClient(){
    // Your code here
  }

  render() {
    return (
      <div>
        <Button onClick={this.onUpdateClient}>
          Update Profile
        </Button>
      </div>
    );
  }
}

Или

class UserProfile extends Component { 
  onUpdateClient(){
    // Your code here
  }

  render() {
    return (
      <div>
        <Button onClick={this.onUpdateClient.bind(this)}>
          Update Profile
        </Button>
      </div>
    );
  }
}

Редактировать: Первое исправление более предпочтительно, так как обработчик событий повторно используется при рендеринге, поэтому дайте вашему приложению небольшое повышение производительности (зависит от того, насколько дорогой компонент на самом деле).Второй метод создает новую функцию при каждом повторном рендеринге компонента, что в долгосрочной перспективе явно замедляет работу вашего приложения.

Забыл упомянуть, что если установлен JS-транспортер, этот синтаксис также возможен:

class UserProfile extends Component { 
  onUpdateClient = () => {
    // Your code here
  }

  render() {
    return (
      <div>
        <Button onClick={this.onUpdateClient}>
          Update Profile
        </Button>
      </div>
    );
  }
}

Выглядит красиво и аккуратно, не так ли?:)

Для получения дополнительной информации, пожалуйста, посетите React docs