Question

我正在开发一个应用程序，因此决定创建两个组件：<AddReport />和<ListOfClients />。在第一个中，它通过添加报告来处理所有功能。在ListOfClients中，它基本上提供了公司的客户列表，理想情况下，允许选择并单击。然后它将客户的ID传递给AddReport，以便用户可以将报告添加到所选客户的帐户中。

class AddReport extends Component {
  state = {
    client: ''
  }

  addReportHandler(e){
    e.preventDefault();
    const managerUID = fire.auth().currentUser.uid;
    const managerName = fire.auth().currentUser.Name + ' ' + fire.auth().currentUser.Surname;
    const currentDate = new Date().getTime();
      fire.database().ref('clients/' + clientID + '/Reports/').push({
        content: this.rContent.value,
        date: currentDate,
        manager: 'Manager',
        managerID: managerUID
      });
    }

 selectClient(e){
      this.setState({client: ''});
    }
  render(){
    return (
      <form onSubmit={this.addReportHandler.bind(this)}>
      <ListOfClients clicked={this.selectClient.bind(this)}/>
      <textarea className="form-control" placeholder="Content" ref={ el => this.rContent = el } />
      <button className="btn btn-primary">Add Report</button>
      </form>
    )
  }
}

<ListOfClients />在render方法中看起来像这样（检索客户端列表一切正常

render()
  {
  let clientList = this.state.clientList.map( client =>
    <a key={client.Id} onClick={this.props.clicked} class="list-group-item list-group-item-action">{client.name}</a>
  );
  console.log(clientList);
  let placeholder = 'Search for ' + this.state.companyName + ' clients';
  return (
    <div>
    <input type="text" className="form-control" placeholder={placeholder}  />
    <div className="list-group">
    {clientList}
    </div>
    </div>
  )
}
}

提前感谢您的帮助！

Answer 1

使用箭头功能自动绑定this：

class AddReport extends Component {
  selectClient = (client) => {
    this.setState({ client });
  }
  render(){
    return (
      <form>
        <ListOfClients clicked={this.selectClient}/>
      </form>
    )
  }
}

在回调函数中发送client：

<a key={client.Id} onClick={() => this.props.clicked(client)} class="list-group-item list-group-item-action">{client.name}</a>

反应读取子状态

1 个答案: