当子点击事件命中时反应从父组件获取数据答案

【问题标题】：React get data from parent component when child click event hit当子点击事件命中时反应从父组件获取数据
【发布时间】：2020-01-19 13:17:47
【问题描述】：

我有一个名为“工具栏”的可重用子组件工具栏有一组按钮（新建、保存、保存和关闭、历史记录等）当这些按钮被触发时，我想从父级（新）清除数据或执行 API 调用以保存数据等等。

我的问题是父级有一个表单和填充了数据的 React-Tabulator 表（来自 api 调用）我需要一种方法来查看父级上的子单击事件，从表单中获取数据并调用 getData()在表格上，然后将这些更新的值传递给子级（父级上没有按钮）以保存或清除表格并在按下新的时删除表格数据。工具栏

class Toolbar extends React.Component {
  constructor(props){
    super(props);
    }
saveTbBtnClick =()=>{
      var uRl = this.props.nav +"Save";
      var data = this.props.dataPassed;

      $.ajax({
        type:"POST",
        url: uRl,
        dataType: 'json',
        data: {'':JSON.stringify(data)},
        success: function(data){
            if(data.success == true){
                window.alert("Successfully saved ")
            }
            else{
                alert("Guess what didn't happen with the data")
            }
        },
        error: function(data){alert("Error")}
    });
}
  render(){
  return (
    <div className="Toolbar">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css"></link>
      <div id="tbControls">
         <button id="newTbBtn"  className="fa fa-plus" onClick={this.newTbBtnClick} />
         <button id="saveTbBtn" className="far fa-save" onClick={this.saveTbBtnClick} />
         <button id="saveCloseTbBtn" className="fas fa-save" onClick={this.saveCloseTbBtnClick}/>
         <button id="refreshTbBtn" onClick={this.refreshTbBtnClick} className="fa fa-sync"> </button>
         <button id="copyTbBtn" onClick={this.copyTbBtnClick} className="far fa-copy" > </button>
         <button id="historyTbBtn"> History <i className="fas fa-chevron-down"></i> </button>
         <button id="viewUserTbBtn" onClick={this.viewUserTbBtn} hidden={this.props.VUvisibility}>View Users</button>
         <button id="deleteTbBtn" className="far fa-trash-alt" onClick={this.deleteTbBtnClick}></button>

      </div>



    </div>
  );
}
}
export default Toolbar;

父组件

class Trade extends React.Component {
  constructor(props){
    super(props);
this.state={...}

render(){ 
  return (
<div>
       <div id="ToolBarMenu">
        <Toolbar id="TradeToolbar" dataPassed={this.state.data} VUvisibility={true} nav= 
        {this.state.api}></Toolbar>
      </div> 

<div id="TradeInputs">
            <form id="TradeForm">
              <p>
                <label>Name </label>
                <input id="txtbxTradeName"></input>
              </p>
              <br />

                <p>
                  <label id="TradeDescriptionlbl">Description </label>
                  <textarea id="txtbxTradeDescription"></textarea>
                </p>
              <br/>

              <p>
                <label id="TradeTimeCodeslbl">Default Time Codes</label>
                <select id="TradeTimeCodes" name="Time Codes" multiple>
                  <option value="RSS">RSS</option>
                </select>
              </p>

            <br /><br />
            </form>
            <label>Additional Questions</label><br /><br />
            <ReactTabulator id="TradeAdditionalQuestions" data={this.state.data} columns={this.state.columns} options={this.state.options} ref={ref => (this.ref =ref)}/>
        </div>
</div>

【问题讨论】：

嗨 HK-47，检查我的解决方案，如果有帮助，请告诉我。
你真的是我的英雄。谢谢

标签： react-native parent-child

【解决方案1】：

你应该只拥有父组件中的所有函数并将它们传递给子组件，并在需要时从子组件调用函数。

例如，将saveTbBtnClick函数移动到父组件

saveTbBtnClick =()=>{
      var uRl = this.state.api +"Save";
      var data = this.state.data;

      $.ajax({
        type:"POST",
        url: uRl,
        dataType: 'json',
        data: {'':JSON.stringify(data)},
        success: function(data){
            if(data.success == true){
                window.alert("Successfully saved ")
            }
            else{
                alert("Guess what didn't happen with the data")
            }
        },
        error: function(data){alert("Error")}
    });
}

将此函数传递给孩子，

<Toolbar 
   id="TradeToolbar" 
   dataPassed={this.state.data} //pass the data only when required in child component
   VUvisibility={true} 
   nav={this.state.api}  //pass the data only when required in child component
   saveTbBtnClick={this.saveTbBtnClick}  //pass the function here
/>

最后你可以调用这个函数，

<button id="saveTbBtn" className="far fa-save" onClick={this.props.saveTbBtnClick} />

这样你可以只拥有父组件中的所有功能，并将它们传递给子组件并适当地调用。

【讨论】：