React native 当子组件单击事件命中时，从父组件获取数据

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

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

类工具栏扩展React.Component{
建造师（道具）{
超级（道具）；
}
saveTbBtnClick=（）=>{
var uRl=this.props.nav+“保存”；
var data=this.props.dataPassed；
$.ajax({
类型：“POST”，
url:url，
数据类型：“json”，
数据：{''：JSON.stringify（数据）}，
成功：功能（数据）{
if（data.success==true）{
window.alert（“已成功保存”）
}
否则{
警报（“猜测数据没有发生什么”）
}
},
错误：函数（数据）{alert（“error”）}
});
}
render（）{
返回(
历史
查看用户
);
}
}
导出默认工具栏；

父组件

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>

class.Component{
建造师（道具）{
超级（道具）；
this.state={…}
render（）{
返回(

名称




描述




默认时间代码
RSS




其他问题


（this.ref=ref）}/>

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

例如，将

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} />

---

这样，您可以只在父组件中使用所有函数，并将它们传递给子组件并进行相应调用。

您好，HK-47，请检查我的解决方案，并告诉我这是否有帮助。您真的是我的英雄。谢谢

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