onClick中的两个参数

Question

我试图在ReactJs中通过一个两个事件的动作，基本上我想要这样的东西

<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（）”。

Answer 1

根据你的问题，这是我对你要找什么的最好猜测。本质上，您希望能够控制子组件中父组件的状态。道具是不可变的（更多信息）。因此，您不能在子组件中将道具设置为彼此相等。您需要在父组件中调用函数来设置父组件中状态的值。当父组件获得新状态时，子组件将使用新值重新呈现。如果希望在使用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>
  );
};

Answer 2

试试这个：

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

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

Answer 3

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

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