Question

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

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

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>

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

像这样，您只能将所有功能都包含在父组件中，并将它们传递给子组件并适当地调用。

子点击事件击中时，React从父组件获取数据

1 个答案: