Question

我有按钮和2个功能的组件。各种组件中使用的按钮组件。并且对于某些人来说需要一个用于onclick事件的函数，对于其他 - 第二个。如何更改onclick事件的功能？我正在使用this answer，但总是在我的组件中未定义。

export default class MyButtonComponent extends Component {

constructor(props) {
    super(props);
    propTypes: {
        onClick: PropTypes.func
    };
    this.state = { loading: false, api_url: "http://localhost:8000" };
}

 static get DefaultProps() {
  return {
    onClick: this.firstFunction(event)
  }
}

firstFunction(){
/*some code*/
}

secondFunction(){
/*some code*/
}

render() {
    return (
        <LaddaButton
            loading={this.state.loading}
            onClick={this.props.onClick}
            className='submit'
            data-color="#eee"
            data-style={SLIDE_UP}
            data-spinner-size={30}
            data-spinner-color="#ddd"
            data-spinner-lines={12}
            data-url={this.props.url}
        >
            Отправить
        </LaddaButton>

    );
}

另一个组成部分：

<FormGroup>
     <Col mdOffset={5} md={7}>
         <MyButtonComponent onClick={this.secondFunction} data-url="someurl.com"></MyButtonComponent>
     </Col>
</FormGroup>

还尝试添加

onClick={e => this.secondFunction(e)}

按钮组件但总是出错

_this2.secondFunction is not a function

Answer 1

问题与您使用this的方式有关 - 当您在其他组件的this.secondFunction元素中调用<FormGroup>时，它正在寻找组件中的secondFunction。您已在secondFunction中定义了MyButtonComponent，因此它会以undefined的形式返回。

您可以通过在MyButtonComponent中定义单击处理程序来解决此问题，该处理程序根据您可以在外部更新的道具选择要调用的函数。 E.g。

function myClickHandler(e) {
    if(useFirst) {
        this.firstFunction(e);
    } else {
        this.secondFunction(e);
    }
}

然后，您可以在其他组件的render方法中更改该属性，例如

<FormGroup>
    <Col mdOffset={5} md={7}>
        <MyButtonComponent useFirst=false data-url="someurl.com"></MyButtonComponent>
    </Col>
</FormGroup>

Answer 2

由于您将secondFunction()作为道具传递给MyButtonComponent组件，因此不能在MyButtonComponent组件中定义，而是在具有以下代码的组件中定义< / p>

<FormGroup>
     <Col mdOffset={5} md={7}>
         <MyButtonComponent onClick={this.secondFunction} data-url="someurl.com"></MyButtonComponent>
     </Col>
</FormGroup>

在MyButtonComponent中，您可以将其引用为this.props.onClick()，但必须在调用组件中定义

此外，您需要绑定该函数，同时将其作为道具传递给MyButtonComponent

<FormGroup>
     <Col mdOffset={5} md={7}>
         <MyButtonComponent onClick={this.secondFunction.bind(this)} data-url="someurl.com"></MyButtonComponent>
     </Col>
</FormGroup>

检查答案 here 以更好地了解流程

改变组件的onClick函数反应js？

2 个答案: