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

Posted 2023-02-22

【中文标题】当子点击事件命中时反应从父组件获取数据

【英文标题】：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，检查我的解决方案，如果有帮助，请告诉我。

你真的是我的英雄。谢谢

【参考方案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 />

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