onClick里面的两个参数答案

【问题标题】：Two parameters inside onClickonClick里面的两个参数
【发布时间】：2019-08-12 20:01:02
【问题描述】：

我正在尝试在 ReactJs 中的 onClick 上传递两个事件操作基本上我想要类似的东西

<div className="botao shadow-drop-center col xl12 l12 m12 s12" onClick={(prop1.value1 === prop2.value2), this.continue(project)} >

我尝试了 1000 种不同的语法编写方式

<div className="botao shadow-drop-center col xl12 l12 m12 s12" onClick={(prop1.value1 === prop2.value2), this.continue(project)} >

我的预期结果是，当用户点击按钮时，pro1 变为 prop2，同时执行“this.continue()”。

【问题讨论】：

您不应该从子组件中更改道具，并且 === 不会设置值，而是比较两个值。有关如何在 onClick 处理程序中调用 2 个函数的信息，请参阅@Dupocas 答案。跨度>
欢迎来到 SO！您是否尝试将prop2 的值更改为prop1？你能详细说明一下吗（“pro1 变成了 prop2”）？
@Domino987 谢谢。虽然没有锻炼。在这种特殊情况下，我不能使用 setState。
@technogeek1995。基本上我需要从 firebase 集合中推送一个值并将该值提供给 state prop（在父组件上）
@Oblicion A 什么都不起作用。您应该将回调道具传递给子组件以更新该道具。这样，您就不会改变道具。

标签： reactjs

【解决方案1】：

一个有多个语句的函数怎么样：

onClick={() => {
    setProp1(prop2)
    this.continue()
}}

【讨论】：

我已经试过了。在这种特殊情况下我不能使用 setState ：s

【解决方案2】：

试试这个：

function handleClick () {
prop1.value1 = prop2.value2
this.continue(project)
}

return (
<div className="botao shadow-drop-center col xl12 l12 m12 s12" onClick={handleClick} >
)

【讨论】：

它没有锻炼 :( 我想我将不得不与某人分享这页代码 :s

【解决方案3】：

根据您的问题，这是我对您要查找的内容的最佳猜测。本质上，您希望能够在子组件中控制父级的状态。道具是不可变的 (more on that)。因此，您不能在子组件中将道具设置为彼此相等。您需要在父组件中调用一个函数来设置父组件中的状态值。当父组件获得新状态时，子组件将使用新值重新渲染。如果您还想在使用 onClick 处理程序时执行一个函数，则需要创建一个包装函数来同时执行这两个操作。

// Parent Component
class Parent extends React.Component {

  constructor(props) {
    super(props);
    this.state = { value1: '', value2: '' };

  }

  continue() {
    // do work
  }

  setPropValue1 = (value) => {
    const state = { ...this.state };
    state.value1 = value;
    this.setState(state);
  }


  render () {
    return (
      <Child 
        continue={this.continue}
        value1={props.value1}
        setPropValue1={this.setPropValue1}
        value2={props.value2}
      />
    );
  }
};



// Child Component
const Child = (props) => {

  const wrappingClickHandler = e => {
    props.setPropValue1(value2)
    props.continue(project);
  };

  return (
    <div
      className="botao shadow-drop-center col xl12 l12 m12 s12"
      onClick={wrappingClickHandler}
    >
        {props.value1}
    </div>
  );
};

【讨论】：