Question

这是我尝试过的，并且详细说明了我想实现的目标，有人可以帮忙。

class ConfirmDialog extends React.Component {
  callback(action){
  	alert(action)
  }
  
  render(){
    return(
      <div className='dialog'>
        <div>confirm dialog</div>
        <button onClick={() => this.callback('yes')}>Yes</button>
        <button onClick={() => this.callback('no')}>No</button>
      </div>
    )
  }
}

class Hello extends React.Component {
	constructor(props){
    super(props);
    this.state = {
	  showDialog: false,
    }
  }
  
  onButtonClick(params) {
	//I want yes no callback here without loosing my previous params
    //so i can use switch case here for yes / no action.
  	this.setState({showDialog: !this.state.showDialog})
  }
  
  render() {
    return (
	<div>
	<button onClick={() => this.onButtonClick({test: 'test params'})}>
        Click</button>
     {
       this.state.showDialog ? 
      <ConfirmDialog callback={this.onButtonClick}/> : null
     }
	</div>    
    )
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

.dialog {
  background: tomato;
  width: 150px;
  height: 150px;
  margin: auto; 

}

.dialog button {
  display : inline-block;
  text-align: center;
  margin: 0 10px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

on回调函数应该可以执行我单击的操作，而不会丢失参数。 React JS-带有操作的函数回调的确认对话框，而不会丢失先前的参数

Answer 1

您必须使用通过组件prop传递的回调函数：

<button onClick={() => this.props.callback('yes')}>Yes</button>
<button onClick={() => this.props.callback('no')}>No</button>

Answer 2

您可以在ConfirmDialog组件的道具中添加功能

<ConfirmDialog callback={this.onSelection}/>

并在单击“是”或“否”按钮时调用它

this.props.callback(action);

您现在可以在onSelection函数中使用自己的值。

class ConfirmDialog extends React.Component {
  callback(action){
  	this.props.callback(action);
  }
  
  render(){
    return(
      <div className='dialog'>
        <div>confirm dialog</div>
        <button onClick={() => this.callback('yes')}>Yes</button>
        <button onClick={() => this.callback('no')}>No</button>
      </div>
    )
  }
}

class Hello extends React.Component {
	constructor(props){
    super(props);
    this.state = {
	    showDialog: false,
    }
  }
  
  onSelection(value) {
    console.log("My dialog value is :", value); //Value contains "yes" or "no"
    //set value to state or use it here
  }
  
  onButtonClick(params) {
  	this.setState({showDialog: !this.state.showDialog})
  }
  
  render() {
    return (
      <div>
        <button onClick={() => this.onButtonClick({test: 'test params'})}>Click</button>
         {
            this.state.showDialog ? 
              <ConfirmDialog callback={this.onSelection}/> 
            : 
              null
         }
      </div>    
    )
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

.dialog {
  background: tomato;
  width: 150px;
  height: 150px;
  margin: auto;
}

.dialog button {
  display: inline-block;
  text-align: center;
  margin: 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Answer 3

您没有将道具正确传递给 ConfigComponent 。您需要使用constructor类，并在道具上调用super。

class ConfirmDialog extends React.Component {
  constructor(props) {
    super(props)
  }
  callback(action){
    alert(action)
  }

  render(){
    return(
      <div className='dialog'>
        <div>confirm dialog</div>
        <button onClick={() => this.props.callback('yes')}>Yes</button>
        <button onClick={() => this.props.callback('no')}>No</button>
      </div>
    )
  }
}

现在，在您的 Hello 组件中，您可以使用回调的值

class Hello extends React.Component {
    constructor(props){
    super(props);
    this.state = {
      showDialog: false,
    }
  }

  onButtonClick(yesOrNo) {
    //I want yes no callback here without loosing my previous params
    //so i can use switch case here for yes / no action.
    console.log(yesOrNo)
    this.setState({showDialog: !this.state.showDialog})
  }

  render() {
    return (
    <div>
    <button onClick={() => this.onButtonClick({test: 'test params'})}>
        Click</button>
     {
       this.state.showDialog ? 
      <ConfirmDialog callback={this.onButtonClick.bind(this)}/> : null
     }
    </div>    
    )
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

这里是有效的示例https://codesandbox.io/s/r09z191w3p

Answer 4

为了更好地管理您的反应代码，请将PropTypes合并到您的代码中。 https://www.npmjs.com/package/prop-types

添加回调类型：

    ConfirmDialog.propTypes = {
       yesCallback: PropTypes.func,
       noCallback: PropTypes.func
    };

在“确认对话框”组件中使用回调

 <button onClick={() => this.props.yesCallback("Yes")}>Yes</button>
 <button onClick={() => this.props.noCallback("No")}>No</button>

从父级组件传递道具

<ConfirmDialog
            yesCallback={message => {
              alert(message);
            }}
            noCallback={message => {
              alert(message);
            }}
/>

React JS-具有函数回调的确认对话框

4 个答案: